TIL: 2022-10-24

⚙️ 오늘 배운 주제

UI/UX

 

🐹 오늘의 기분

재귀에게 씨게 혼나고 UI/UX 유닛으로 넘어왔다. 애초에 프론트엔드에 관심을 갖기 시작한게 이 부분 때문이라 오늘은 재미있게 공부했다. 오늘 내용은 대부분 개념이라 학습하는데 큰 어려움은 없었다. 하지만 개념이 약간 난해하게 다가오기도 했어서 막상 내일 피그마로 실습해보면 쉽지 않을 것 같다는 생각이 든다. 오늘 배운 내용을 내일 실습에 잘 적용할 수 있을지가 관건..!

 

🗝 키워드

UI, UX, UI 디자인 패턴, 그리드 시스템, UX 7요소, User Flow, UX 사용성 평가

 

🗣 스스로에게 설명

UI, UX에 대한 전반적인 내용은 블로깅 과제가 있어서 그걸로 대체한다.

UI/UX

Material Design에 가면 각 컴포넌트의 디자인 예시를 찾아볼 수 있다.

Material Design

 

피터 모빌의 UX 7요소

Peter Morville's UX Honeycomb

UX를 평가할 때에도 사용됨.
valuable에서 요소를 종합적으로 평가하여 가치 있는 정보를 제공하고 있는지 판단한다.

 

User Flow

사용자가 제품에 진입한 시점을 시작으로 취할 수 있는 모든 행동
보통 다이어그램으로 정리함.

기본적인 세 가지 요소

이미지 출처: Bootcamp

직사각형: 사용자가 보게 될 화면
다이아몬드: 사용자가 취하게 될 행동
화살표: 화면과 행동을 연결시켜주는 화살표

User Flow 다이어그램을 그려봄으로써 사용자 흐름 상 어색하거나 매끄럽지 않은 부분을 발견하여 수정할 수 있음

있으면 좋은 기능을 발견하여 추가하거나 없어도 상관 없는 기능을 발견하고 뺄 수도 있다.

개발 초기 단계에 그려봄으로써 불필요한 작업을 줄일 수 있다.

 

Figjam에서 플로우차트를 그려볼 수 있다.

 

제이콥 닐슨의 10가지 사용성 평가 기준

Heuristic

완벽한 지식 대신 직관과 경험을 활용하는 방법론

1. Visibility of system status: 즉각적인 피드백 제공
2. Match between System and the Real World: 친숙한 단어, 구문 사용
3. User Control and Freedom: 수행한 작업을 취소할 수 있는 방법, 탈출구 제공하기
4. Consistency and Standards: 외부 일관성과 내부 일관성
5. Error Prevention: 오류가 발생하기 쉬운 상황 컨트롤하기 ex) 삭제 시 이용자의 의사 확인
6. Recognition Rather Than Recall: 기억보다는 직관. 사용자가 기억해야 할 정보를 줄임
7. Flexibility and Effieicney of Use: 초보자와 전문가 모두에게 맞춤 기능 제공하기
8. Aesthetic and Minimalist Design: 불필요한 정보는 숨기기, 사용 빈도가 적은 메뉴는 숨겨놓는 것도 방법
9. Recognize, Diagnose, and Recover from Errors: 문제가 무엇인지 정확하게 보여주고 해결 방법 제시하기
10. Help and Documentation: 간단한 안내를 추가하거나 도움이 되는 문서 제공하기