TIL (Today I learned)
오늘 나는 무엇을 했나요
- 카타 (UI 컴포넌트)
- UX 기획 및 리서치 강의
오늘은 어떤 것을 배웠나요
1.카타 (UI 컴포넌트)
오늘은 각 상황 Do&Don't 를 정리하고 그동안 리서치한 카타자료들을 정리를 하면서 발표할 대본을 작성하였다.
먼저 라벨을 적을때 적절한 대소문자 사용유무에 대한 Do&Don't이다
Do의 이유로는 소문자와 대문자를 같이 활용하여 상대적으로 가독성이 높아진다
Don't의 문제점으로는 대문자만 사용을 하여 가독성이 떨어지고, 디자인의 일관성이 부족하다
그리고 breland & breland의 글을 참고했는데
텍스트를 모두 대문자로 설정하면 읽기 속도가 약 13 ~ 20% 느려진다는것을 알수 있었다!
그다음 입력을 받는 텍스트 필드(예: 비밀번호)의 경우, 해당되는 경우 헬퍼 텍스트를 오류 텍스트로 바꾸는 경우다
Do의 이유로는 사용자는 무엇을 잘못했는지 바로 알 수 있어 수정이 쉽고, 헬퍼 텍스트에서 오류 텍스트로 전환함으로써 시각적으로 필드의 상태를 명확히 표시한다
Don't의 문제점으로는 오류 텍스트 헬퍼 텍스트를 동시에 표시할 경우로
동시에 두 텍스트를 표시하면 UI가 복잡해지고 사용자가 혼란스러울 수 있고, 어떤 텍스트를 우선적으로 참고해야 할지
명확하지 않다
그다음으로는 라벨의 길이와 요소이다
Do의 이유로는 한 줄 라벨은 사용자에게 빠르게 의미를 전달하며, 시각적으로 깔끔하다
Don't의 잘못된 사례와 문제점으로는
1.과도한 텍스트 길이
지나치게 긴 텍스트는 잘릴 가능성이 있고, 화면의 다른 UI 요소와 충돌할 수 있다
2.라벨이 일부분만 보임
잘린 텍스트는 불완전한 정보를 전달하여 사용자 혼란을 야기할 수 있다
3.불필요한 설명
라벨은 핵심 정보만 전달해야 하며, 세부 설명은 툴팁이나 별도의 안내문구로 제공하는 것이 적합하다
이렇게 여러 Do&Don't 를 리서치를 마무리하고 발표대본을 작성하고 마무리하였다.
2.UX 기획 및 리서치 강의
1. UX 기획 첫 단추 : 문제 정의 및 가설 수립
문제정의
문제정의는 보통 PMPO 가 하지만 디자인관점에서는 풀지않는 경우가 많다.
그래서 회사에서는 적극적으로 의견을 내는 디자인을 선호하며, 실제로 유저입장에서는 디자이너가 더 문제정의를 잘한다
문제정의를 할때는 문제,문제정의,정량화된 수치,근거,근거데이터가 있어야한다.
이때 관점을 2가지 관점으로 볼수있다.
1.유저경험관점
2.비즈니스관점
가 있다.
먼저 유저경험관점으로는 예시로 회원가입 화면에서 유저가 이탈을 한다면 이는 전체적인 앱을 사용하기도전에 이탈을 하기때문에 유저의 경험에 부정적이다.
비즈니스관점으로는 유저가 회원가입도 못하고 이탈을 하기 때문에 유저 손실, 수익감소 등의 관점으로 볼수있다.
다음은 문제의 근거가 필요하고 그 근거에 대한 데이터도 필요하다
예시로 회원가입에서 약관동의정보와 회원가입정보를 동시에 입력하거나, 명확한 약관동의안내가 없다거나 하여 유저가 이탈을 한다면 근거로 사용할수있다.
가설수립
문제에대한 가정을 정의하고 검증하는것이다.
가설수립을 할때에는 어떤변경이있는지 ,어떤결과가 있는지가 담겨있어야한다.
그리고 검증방법과 모니터링지표설정이 있다.
이때 좋은가설이 가지고있는 요소는 무엇이냐 하면
1.목표지향
2.구체성과명확성,
3.측정 가능성
이 3가지가 있다.
가설수립을 하는 방법은
가설 -> 검증방법 ex) ab테스트) ->모니터링지표 (성공지표,가드레일지표) 순서로 하면 된다.
이때 성공지표와 가드레일지표를 설명하겠다.
성공지표는 먼저 가설수립으로 인하여 나온 결과를 정하는 지표이고
가드레일지표는 그 회사가 가장 중요하게 생각하는 지표이다
예시로 성공지표를 정한것이 만족했지만 가드레일지표가 떨어지거나 충족시키지 못한다면 이는 전면적용을 고민할수있다.
사례로 바꿔본다면 축구팀이 10승을 목표로 정하였고, 가드레일지표는 부상당한 선수의 수로 정하였다.
만약에 10승을하였지만, 과도한 훈련으로 부상당한 선수가 가드레일지표를 넘어간다면 훈련 방식을 조정할 수 있다.
가드레일 지표는 말그대로 가드레일을 세워 잘못된 길로 가지 않도록 도와주는 안전선인것이다.!!
원페이저
한페이지안에 문제,가설,방향성,목적등을 위에 한 모든것을 한눈에 파악할수있게 도와준다.
이것은 계속 수정보완을 거치며, 명칭은 회사마다 다를수가있다.
문제,문제정의이유,근거데이터,가설,검증방법,성공지표,가드레일지표 등을 담을수 있고 계속 수정이 될수있다.
-------------------------------------------
2. UX 기획 구체화 : 유저 사용 맥락 반영
유저시나리오
키워드로 본다면 스토리텔링과 감성적 이해로 볼수있다.
스토리텔링: 서비스를 스토리로 푸는것이고 여기에는 유저,목표,동기,외부요소가 담길수있다!
고객여정지도
키워드로 본다면 여정단계, 시각화로 볼 수있다.
다음 고객여정지도는 관점,경험,인사이트 이렇게 세파트로 나눌수가 있다.
관점에는 페르소나, 시나리오등
경험에는 여정단계,행동,생각,감정(단일선)
인사이트에는 개선사항,담당팀이나 부서
시각화방법
고객여정지도를 그리는 방법으로 보면된다.
목적설정-유저페르소나정의-여정단계분류-터치포인트파악-기회파악
목적설정은 말그대로 유저가 원하는 목적을 설정하는것이다.
유저페르소나는 가상의 인물을 설정하는것이고,
여정단계분류는 타임라인을 나누어서 단계마다 나눠서 분석을 하는것이다.
터치포인트는 타임라인마다 생기는 문제점 페인포인트를 파악하는것이고
기회파악은 파악한 문제점의 개선사항을 생각해보는것이다.
유저스토리
키워드로는 개발구현가능단위, 합의도출, 걸킨문법, 테스트케이스가 있다.
유저스토리는 특정기능을 실제개발구현가능한 작은 단위로 기술하는 방법으로
보통 유저시나리오나 유저저니맵보다 빈번하게 활용된다고 한다.
간단하게 설명하면 어떠한 상황을 요소 3가지로 나누어서 설명을 하는것이다
1. as a 유저
2. l want(goal) 유저가 원하는기능 행동
3. so that(benefit) 유저가 얻을수있는이득
예시로는 쇼핑몰 웹사이트로 설명하면
As a는 쇼핑몰에 로그인한 유저
I want 는 제품 카테고리를 쉽게 검색하고 원클릭으로 결제할 수 있는 기능
so that은 시간을 절약하고 필요한 물건을 빠르게 구매할 수 있다.
로 할수있다.
이때 유저스토리에 걸킨문법을 추가할수있다 (디테일)
요소는
Given 주어진상황
when 조건및 행동
then 결과
예시로는
Given 주어진상황 : 사용자가 쇼핑몰 계정에 로그인한 상태이고, 원하는 제품을 구매하려고 할 때
when 조건및 행동 : 제품 검색창에 키워드를 입력하거나 카테고리를 탐색한 후, 결제 버튼을 클릭하면
then 결과 : 복잡한 결제 단계 없이 저장된 결제 정보를 사용해 빠르게 구매가 완료되고, 사용자는 추가적인 시간 소모 없이 필요한 물건을 확보할 수 있다.
그외 and or 활용하여 표현가능하다.
---------------------------------
3. UX 기획 구체화 : 논리적인 흐름 설계
유저플로우
키워드로는 화면간의 이동이다
화면간의 이동을 구체화하는도구로써 다양한경우의수 고려할수있다.
(해피패스에 매몰되지않고 다양한경로 고려)
해피패스란 사용자가 아무런 문제없이 결과까지 도달하는것으로 해피패스가 발생하면 다양한문제를 알수가 없게 된다!!
유저플로우를 만들때 필요한것들로는
1.시작/끝 (원형)
2.동작 (사각형)
3.조건(마름모)
4.방향(화살표) 가 있다.
동작은 색상으로 한번더 구분할수있다.
와이어프레임
키워드로는 로우피델리티, 아이데이션가 있다.
장점으로는 부담없이 아이디어참여할수있고, 중간에 수정도 용이하고 , 간단하게 작성을 할 수 있어서
레이아웃과 플로우에 집중할수있다.
와이어프레임을 그릴때 손과 디자인툴 각각 장점이 있다.
손은 툴보다 비교적 빠르고 쉽게 제작을 할수있다.
툴은 물리적같은공간아니라도 실시간 함께작업가능하다
정보 구조도
키워드로는 그룹핑 라벨링이 있다.
정보 구조도는 구조를 도식화해서 사용자가 길을 잃지않고 원하는정보쉽게찾고 작업을 완료할수있도록 도와주는방법론이다.
정보구조도는 저번에 한번 배웠던 적이 있다. 그때는 예시로 쇼핑몰의 전체 구조도등으로 예시를 들었던 기억이 있다.
구성요소로는
a.조직및구성시스템
정보체계적정리구성
ex 메뉴계층구조 콘텐츠그룹화 등
b라벨링시스템
ex 메뉴항목명칭, 카테고리명
c네비게이션 시스템
ex 메뉴바,내비게이션 바
d검색시스템
ex 검색기능, 필터정렬옵션
등이 있다.
즉 상위와 하위개념을 잘 그룹핑 및 라벨링하여 사용자를 도와주는것이다.
정보구조도는 형태가 정해져있지않다
이것은 예시와 함께 몇번 봐야 익숙해질것같다.
---------------------------
4. UX 기획 문서화 : 화면 설계서 및 QA 문서
화면설계서
프로젝트의 복잡도가 높거나 이해관계자많을때 사용한다. (설계가이드같은것이다.)
사용하는 이유는 원할한 히스토리파악과 유지보수이다.
프로젝트의 큼직한 변경이나 작은 마이너한 변경은 다르게 표기를 한다.
큼직한 변경은 따로 변경이력 페이지만들어서 보여주고, 마이너한 변경은 각 페이지마다 시간과 변경내용을 따로 작성을 해준다.
이것은 회사에따라 작성을 하는곳도 있고 안하는곳도 있다!
QA문서
기능배포전에 기능테스트과정이라고 보면된다.
테크니컬qa와 디자인qa로 나누어서 볼수 있다.
테크니컬qa
의도한대로 기능이 동작하는지 테스트하는것이다.
테스트케이스작성후 요구사항충족하는지 확인을 하게 된다
이때 어떤조건에서 테스트하는지 자세히 명시해야 한다.
디자인qa
의도한대로 디자인이잘 구현되었는지 테스트 하는것이다.
만약 구현이 잘 안됬다면 asis tobe로 개발자한테 알려주기도한다.
이때 주의할점은 두개로 분리해서 관리 해보는것이다.
개발반영한거랑 최종적으로 이 이슈가 해결되었는지가
막상 확인해보면 의도한거랑 다르게 구현되있을수도있다.
오늘은 어떤 문제를 겪었고, 앞으로는 어떻게 해결할 것인가요
오늘 카타때 마무리 정리를 하고 아직 많이 부족하지만 내일 발표를 하게된다.
열심히 내가 알아낸것들을 카타인원들에게 설명을 하면서 나도 또 복습을 해야겠다
강의도 아직 완벽하게 숙지를 못하여 이해한 부분만 작성을 해서 띄엄띄엄 못적은 개념들이 있다.
계속 강의를 보면서 모르는것은 튜터님에게 질문하면서 공부해야겠다.