[10/21] 시나리오 쓰고있네

익숙한 말들

학교 다니면서 그렇게 지긋지긋했던 data structure/hierarchy/cluster 등등..
아 또 너야.. 하면서 얼추 빠삭하니 설렁설렁 공부하려했지만,

까고보니 시각적인 관점에서의 이야기들이었고, 결국 내가 생각하지 못했던 포인트들을 줍줍하려고 열심히 듣게 된거 같음

 

Clustering in Design = Gestalt Principle

결국 정보의 성격이 비슷한 것 끼리 시각적으로 클러스터화하라는 건데,
이때, 게슈탈트 원리를 생각하며 논리적으로 설명 가능한 구조화가 중요한 것 같다.

이를 figma 및 design적인 term으로 설명하자면, Cluster는 스크린 내부에서 '정보의 성격'에 따라 분류된 Section 혹은 section내 Field정도로 이해하려고 한다.

 

 

 왼쪽의 각 item들로 클러스터링 한다면,
product 자체의 정보를 담고있는 title,caption,별점으로 구성된 productCluster를 만들수 있겠고,
가격과 관련된 (할인율,정가,할인가) priceCluster,
배달과 관련된 정보들로 deliveryCluster,
마지막으로 User의 행동을 유도할 ctaCluster가 적당 할 것 같다.

 

현재는 ooooCluster로 네이밍 했지만, 실제 구성할때는 일반적으로 oooo_field로 리펙토링 할 것 같고,

scroll해도 sticky하게 보일 Thumbnail 및 product_field를 한 section / 그리고 ctaCluster역시 cta_section으로 정의할것 같다

(나머지 클러스터들은 그 아래 상세페이지_field, 연락처_field와 함께 body_section으로 정의 할듯)

Visual Hierarchy : 선흐름을 유도하는 시나리오를 써라!

출저 : Sparta

UX 디자이너는 위 처럼 시선의 Flow를 유도하는 시나리오를 써야된다 like 아귀

그리고 그걸 결정하는 것은 크게 세가지 : Typography, Color, Alignment

 

 

위의 세가지를 사용해서 왼쪽의 '항공편 검색' 페이지 내에서 시선을 유도하는 UI 만들기 실습을 진행했다.

 

어떤 요소를 강조하고, 어떠한 시선의 흐름을 생각하려면, 해당 페이지를 이해해야되는데, 사실 이 페이지가 어떤 페이지인지 명확하게 이해되지 않았다. (그러면 좋은 ui가 아니지 않을까?)

 

그래서 타 항공예약 어플을 탐색하면서 내 나름대로 저 화면을 이해해본다면,

 

첫 화면에서는 '검색', '여행 일정 선택', '버튼'의 형태로 구성되어있고,

해당 기입란들을 기입 후 '버튼'을 Tab하면 그에 해당하는 '여행 일정 목록'이 나온다.

 

이와 같은 생각으로 구성한 화면들은 우선적으로 다음과 같다.

 

 

 

 

 

우선 AppTitle 부분의 '항공편 검색'은 User가 한눈에 알아 볼 수 있어야 할 제목이기 때문에, 24p Semibold로 강조했다.

 

해당 화면에서 내가 생각한 시나리오는 다음과 같다.

 

1. 시선이 우선 중하단 여백으로 간 후, 위아래 버튼과 Navigtion Bar로 간다

-> 여기서 User는 '예약'의 Primary Color와 '가격 비교하기 버튼'의 Sementic Color를 확인 후, 다음과 같은 생각을 하게 된다.

"위 항목들을 작성하면 해당 버튼이 Primary Color로 바뀌며 활성화 되겠구나!"

 

2. 해당 항목들을 채울때마다, 각 란의 글씨의 투명도는 낮아져서 'task를 수행했다'라는 인식을 주고, 잘못 기입되었는지 여부를 명확히 확인하게한다.

 

3. 출발/도착이 바뀌는 버튼의 경우 해당 란들이 채워지면 Primary에 가까운 색으로 변하는데, 이는 '이제 해당 버튼을 누르면 위아래가 바뀝니다'를 의미한다

 

4. 모든 란을 채우면 '가격 비교하기 버튼'이 Primary Color로 바뀌며 활성화된다.

(여기서 각 icon크기/Font size,weight는 내일 수정하여 작성할 예정)

 

  

 

그리하여 가격비교하기를 누르면, 다음과 같이 해당 일정에 알맞은 항공편들이 '가격 비교하기'버튼을 밀어내고 activate된다.

 

해당 서비스에서 가장 중요한 요소는 '가격'이라고 판단했고, User에게 가장 중요한 요소는 이와 함께 '항공시간'이라고 판단했기에,

시선의 흐름을 가격 -> 항공시간으로 주려고 의도했다.

 

그리하여 가격은 붉은계열/Bold/24p,  항공시간은 짙은푸른계열/Semibold/20P로 설정했다.

 

그 중 가장 위 조건과 부합하거나, 가장 가격이 싼 항공편은 위 입력란과 같은 색으로 표현된다.

(sementic color이기 때문에, 더 채도가 있는 color로 할까 고민도 했으나, UI통일성면도 그렇고 '위 입력한 조건과 가장 연관된 조건이에요'라는 메시지를 주려면 같은 색도 괜찮다 판단하였다)

 

이에 더해 List내부에서 강조된 item의 Text는 투명도를 덜주어서 더 명확하게 표시하였다.

(그게 User입장에서 눈이 덜 아픈 design이라 판단했다.)

 

 

 

 

 

별거 한건 없어보이지만, 나름 나만의 고민이 들어간 결과이다.

오늘은 약 1년간 기다려온 오에이시스 보러 가야한다.

오늘은 여기서 마무리!