사용자 시선 흐름 위주 실습(TIL 16일)

챕터 1 실습 (이어서)

1-6. 사용자 문제 정의 이해

최근 당신이 불편하다고 느꼈던 앱이나 서비스는 무엇인가요?

→ 그 불편함을 느낀 상황과 행동의 흐름을 단계별로 써보세요.

쿠팡 트래블 -> 티켓 이름을 검색하려고 입력 필드를 누름-> 검색화면이 떴으나 어디가 입력 필드인지 몰라서 화면 여기저기를 터치해봄

 

 

그 경험에서 문제는 어디에 있었을까요?

→ UI 자체가 아니라 사용자 행동 흐름 중 어떤 지점이 문제였는지 분석해보세요.

검색 화면에 진입했을 때 입력 필드를 찾지 못했다("티켓 상품을 검색해 보세요”를 화면 설명용 타이틀로 인식해서 해당 영역을 입력 가능한 검색 필드라고 인지하지 못했음)

 

챕터 2 실습

2-1. UI 설계와 정보 구조

마구잡이로 일단 해본 클러스터링

일렬로 죽 늘어진 요소들을 보니까 뇌가 멈춰버려서(...) 일단 영역마다 임시로 이름을 지어주었다

잘 묶은 건지도 모르는 채로 일단 진행했다... 나중에 강의 다 보고 돌아와서 수정할 예정

2-2. 시각적 위계와 시선 흐름

실습은 아니고 네이밍 컨벤션에 관한 강의 내용

2-2 실습한 것(좌) 예제 요소(우)

사실 항공편 예약 레퍼런스를 봐볼까 싶었는데 그냥 알고 있는 지식으로만 만들어두고 나중에 고쳐보는 게 틀린 걸 더 오래 기억할 것 같아서 해보았는데....

포인트 컬러로 저 파란색을 썼는데 너무 한 군데만 들어가서 어색해보인다

어딘가에 더 들어가야 될 것 같은데 지금으로서는 잘 모르겠다.(여행 일정 목록에 선택한 걸 옅은 파랑색으로 줄까 싶은데, 그러면 파란색이 차지하는 비율이 너무 커져서 아웃라인으로 처리해야하나 싶음)

 

2-3. 플랫폼과 레이아웃 변화

2-3실습. 시선의 흐름을 화살표로 그려보았다.

PC유튜브의 경우 검색바에서 바로 영상 콘텐츠 부분으로 흐르지 않을까? 생각해보기는 했었는데 사람은 왼쪽에서 오른쪽으로 읽기 때문에(우리가 책을 읽을 때 어디에서 어디로 읽어나가는지 생각하면 쉽다) 영상 썸네일이 시선을 엄청 끌긴 하지만 네비게이션 서랍으로 시선이 흐른다고 생각했다.

 

데스크탑의 왼쪽에 위치한 네비게이션 서랍의 기능들이 모바일 환경에서는 프로필(You) 탭에 들어가야 찾을 수 있다.
콘텐츠 썸네일을 크게 잘 보이는 것이 영상 플랫폼에서 더 유리하기 때문에 모바일에서 하나의 콘테이너 안에 콘텐츠를 수직 일렬 배치한 것으로 생각한다.

특히 홈/You는 자주 쓰는 기능이므로 하단 네비게이션 바에 배치해두었지만 Explore의 경우 카테고리 검색은 모바일에서 보이지 않는 것 같다.(부가적인 기능이 아니라고 생각해서 숨겨진 것 같음. 나도 PC 유튜브를 이용할 때 저 탐색 기능을 이용해서 해당 카테고리에 잘 들어가보지는 않은 것 같다. 워낙에 검색하면 추천 동영상이 잘 떠서...)

또한 두 플랫폼에서 알고리즘에 기반한 영상 자동 추천이 이루어지는데, 사용자가 무한 탐색을 할 수 있도록 상하 스크롤이라는 동일한 행동 흐름으로 공통 구조가 이루어진다고 생각했다.

 

이외에도 구글 맵, 에어비앤비의 플렛폼 비교 예시가 있긴 했는데 에어비앤비는 한번도 이용해보지 않아서 잘 몰랐기 때문에 분석할 예제로 유튜브를 선택했다. 다음에 시간이 남으면 남은 두 예시도 분석해봐야겠다... 오늘은 여기서 끝@!!