[ UI / 색상 위계] 메인페이지 시각적 계층구조를 통한 강조

아래의 사진은 개인적으로 생각을 반영한 것임을 말한다.
더불어, 브라우저 개발자 코드를 통해 수정한 부분이며, Episoden 무관함을 전달한다.

지극히 개인적인 취향을 담은 개인 작업

 

기존 색상과 UI를 변경하여 Start 버튼을 강조하고자 했다.

 

AI에게 물어본 결론:

Ai는 물어볼 때마가 다른 결과값 + 어떤 질문을 했는지에 따라 정보가 달라진다.
따라서 약간의 편차가 있다는 것을 인지하고 내용을 읽어주길 바란다.

영역별

	기존	수정
정보 표시 (Next)	"Join next session!"이라는 텍스트가 큰 제목으로 있고, "Next topic:"이 별도로 표시됨.	"Join NEXT session!"에서 'NEXT'가 강조되어 있어 더 명확한 계층구조를 보여줌.
버튼 (Start)	"Start this session" 버튼이 더 길고 상세한 텍스트를 포함.	"Start" 버튼이 더 간결하고 심플함. 불필요한 텍스트를 제거하여 직관성이 향상됨.
타이머	"0h 2m 35s"	"0h 0m 46s" 둘 다 동일한 포맷이지만, 이미지 2의 시간 표시가 더 compact하게 보임.
현재 토픽	"Friends and Family"	"Language and Culture" 이미지 2에서는 'Live' 태그가 추가되어 현재 상태를 더 명확히 보여줌.

 

전체 UX

	수정 페이지 특징
가독성	텍스트 계층구조가 더 명확하며, 중요 정보가 더 잘 강조됨.
아이트래킹	중요 정보가 더 명확한 시각적 계층구조를 가져 사용자의 시선 이동이 더 효율적.
정보 밀도	불필요한 시각적 요소들이 제거되어 더 깔끔한 인터페이스를 제공.

 

처리한 항목

1. Content TOP

• Live 아이콘 :
  • 1) 야곱의 법칙을 활용해 'Live 아이콘' 상단에 한번 사용
  • 2) 하단 박스 'Live 아이콘' 중복 제거
• 배경 이미지 삭제 : 오른쪽 상단 배경 이미지 삭제함으로서, 정보 밀도 낮추고 가독성 높임
• 'NEXT' 키워드 강조 : 특정 부분 사이즈 업 + 색상 강조
• 카운트 + 버튼 :
  • 1) 수직처리로 가독성 향상
  • 2) ‘Start’버튼 사이즈를 최대 + box-shadow를 통해 계층구조 설정

 

2. Content BOTTOM

• ‘Add’ 색상 제외 : ‘Start’ 버튼 더 강조
• Add  밖에까지 둘러싼 점선 제거
• How to earn more slots 색 감소 : 아이트래킹(eye tracking) F 법칙 적용

 

 

요약

Start 버튼을 최대한 눈에 띄게 하자는 것이 나의 UX목적이였다.
물론 Browser 개발자 모드로 HTML을 바꿔가며 작업을 가볍게(?) 진행해봤다.
카운트 다운이 있어, 종종 DOM이 다 날아가버릴 때도 있었다.

Figma를 통해서 작업한 것이 아님을 말씀드리며, 이 작업은 Episoden과 전혀
관련이 없음을 다시 한번 말씀 드린다.