UI UX

UI

• 사용자와 인터페이스의 상호 작용

UX

• 사용자의 총체적 경험 (제품,서비스의 직,간접적 사용 경험)

자주 사용되는 UI 패턴

1. 모달(Modal)
2. 토글(Toggle)
3. 탭(Tab)
4. 태그(Tag)
5. 자동완성(Autocomplate)
6. 드롭다운(Dropdown)
7. 아코디언(Accordion)
8. 캐러셀(Carousel)
9. 페이지네이션(Pagination)
10. 무한스크롤(Infinite Scroll,Continuous Scroll)
11. GNB(Global Navigation Bar),LNB(Local Navigation Bar)

그리드 시스템(Grid System)

• UI를 구성할 수 있게 도와주는 시스템

• 구성요소 : Margin, Column, Gutter

• Margin : 양쪽의 여백 (px,vw,%)

• Column : 세로로 나누어진 영역 (표준적으로 휴대폰-4개, 태블릿-8개 PC-12개의 컬럼으로 나뉨)

• Gutter : Column 사이의 공간으로 컨텐츠를 구분하는데 도움을 줌

좋은 UX를 만드는 요소

• 유용성(Useful) : 사용 가능한가
• 사용성(Usable) : 사용하기 쉬운가
• 매력성(Desirable) : 매력적인가
• 신뢰성(Credible) : 신뢰할 수 있는가
• 접근성(Accessible) : 접근하기 쉬운가
• 검색 가능성(Findable) : 찾기 쉬운가
• 가치성(Valuable) : 가치를 제공하는가

User Flow 다이어 그램

• 사용자의 흐름을 다이어 그램으로 표현한것 UX를 개선 할 수 있음

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

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)
6. 기억보다는 직관 (Recognition rather than recall)
7. 사용의 유연성과 효율성 (Flexibility and efficiency of use)
8. 미학적이고 미니멀한 디자인 (Aesthetic and minimalist design)
9. 오류의 인식, 진단, 복구를 지원 (Help users recognize, diagnose, and recover from errors)
10. 도움말 및 설명 문서 (Help and documentation)