[230413] UI와 UX 찍먹

---

🍀 오늘의 날짜 : 23년 04월 13일 
🍀 오늘의 주제 : UI 와 UX 

---

그리드에 대해서는 따로 CS 항목에서 정리하고자 합니다. 

* "그리드"의 모든 것

* [CSS] 레이아웃 뿌셔뿌셔

 

 

 

🔖 UI 와 UX

---

UX ⊃ UI

 

UI : User Interface [ 사용자 인터페이스 ]

사람과 사물 / 시스템 / 기계 / 컴퓨터 프로그램 등 사이에서 의사소통을 위한 목적으로 만들어진 물리적/가상적 매개체

# 사용자 조작환경

# GUI , CLI, NUI(스마폰 터치, 명령어 인식), OUI (모든 사물,물질들이 변형 없이 그대로 인터페이스 장치 ex. IOT)

 

 

UX : USer Experience [ 사용자 경험 ]

사용자가 제품/서비스를 사용하면서 얻는 경험 즉, 사용하면서 느끼는 감정적인 경험을 의미

# 웹이나 앱을 사용할 때 UI가 너무 복잡하고 내가 원하는 서비스를 찾을 수 없어서 종료해버린 경험들이 있을 겁니다. 이러한 상황들을 줄이기 위해 ( 고객 만족 상향 )을 위해 사용자의 관점에서 제품을 기획하고 개선하는 디자인을 UX 디자인이라고 합니다. 

 

 

대표적인 UI  디자인 패턴

---

1. Modal

기존에 이용하던 화면 위에 오버레이 되는 창

 

2. Toggle

On/Off 설정할 때 사용하는 스위치 버튼 

색상, 스위치 위치, 그림자 등의 시각적 효과를 주어 사용자가 토글의 상태를 직관적으로 알 수 잇?게 해야 함. 

 

3. Tab

콘텐츠를 분리해서 보여주고 싶을 때, 사용하는 디자인 패턴 

 

4. Tag

콘텐츠를 설명하는 키워드를 사용해서 라벨을 붙이는 역할 

 

5. Autocomplete

사용자가 입력 중일 때 입력하고자 하는 내용과 일치할 가능성이 높은 항목을 보여주는 것. 

자동 완성 항목은 개수를 제한 하는 것이 좋으며, 키보드 방향 키나 클릭 등으로 접근할 수 있게 하는 것이 좋음.

 

6. Dropdown

선택할 수 있는 항목들을 숨겨놓았다가 펼쳐지면서 선택할 수 있게 해주는 패턴. 

사용자가 선택한 항목을 정확히 알 수 있게 만드는 것이 가장 중요

 

7. Accordion

접었다 폈다 할 수 있는 컴포넌트로 트리 구조의 콘텐츠를 렌더링 할 대 사용하거나, 메뉴바로 사용할수도 있지만 단순히 콘텐츠를 담아놓기 위한 용도로 사용할 수 있습니다. 

 

8. Carousel

회전목마라는 의미로 빙글빙글 돌아가면서 콘텐츠를 표시해 주는 UI 디자인 패턴

 

9. Pagination

한 페이지에 뛰우기에 정보가 많은 경우 , 책 페이지를 넘기듯이 번호를 붙여 페이지를 구분해 주는 것을 의미 

 

10. Infinite Scroll, Continuous Scoll

페이지 끝에 도달 했을 때, 추가 콘텐츠를 로드해서 보여주는 방식

 

11.GNB(Global Navigation Bar) 와 LNB(Local Navigation Bar)

GNB는 어느 페이지에 들어가든 사용할 수 있는 최상위 메뉴, LNB 는 GNB에 종속되는 서브 메뉴 혹은 특정 페이지에서만 볼 수 있믄 메뉴를 의미

 

 

>> 추가적으로 다양한 디자인 패턴이 궁금하다면 클릭 ! 

 

 

 

 

좋은 UX 를 만드는 요소

---

1. 유용성 (Useful) - 목적에 맞는 사용 가능한 기능을 제공? 사용가능한 기능을 제공하고 있는지?

2. 사용성 (Usable) - 사용자가 사용하기 쉬운지? : 기능 단순 , 직관?

3. 매력성 (Desirable)

4. 신뢰성 (Credible) - 결함이 없고 안전해서 사용자가 믿고 사용할 수 있는지?

5. 접근성 (Accessible) - 누구나 쉽게 사용하고 접근할 수 있는지? 

6. 검색 가능성 (Findable)

7. 가치성 (Valuable)

 

 

 

제이콥 닐슨의 10가지 사용성 평가 기준 (Usability Heuristics)

---

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

 

제이콥 닐슨의 10가지 사용성 평가 기준을 생각하면서 UI, UX 디자인 혹은 특히 프론트엔드 개발자들이 틀을 잡으면 굉장히 좋을 것 같다는 생각을 했습니다. 저도 앞으로는 프로젝트 준비할 때 이 점들을 주의깊게 생각을 하며 기획을 해야 겠습니다. 

 

1. 시스템 상태의 가시성

2. 시스템과 현실 세계의 일치

3. 사용자 제어 및 자유

* 사용자 실수를 취소할 수 있는 '탈출구( 삭제버튼)' 제공

4. 일관성 및 표준

5. 오류 방지

6. 기억보다는 직관

7. 사용의 유연성과 효율성

8. 미학적이고 미니멀한 디자인

9. 오류의 인식, 진단, 복구를 지원

10. 도움말 및 설명 문서