사용자 친화 앱 - UI/UX 정의 , UserFlow 다이어그램, UXUI 사용성평가

UI,UX 란? 

UI ( User Interface ) : 사람들이 컴퓨터와 상호 작용하는 시스템을 의미 

- 스마트폰 대중화로 화면 터치를 통한 상호작용 비율 높아지고 ,물리적 상호작용은 볼륭,잠금 등으로 최소화

- 마우스 등장으로 CLI(command line interface) 최소화, 그래픽 UI 중요성 확대 

- 키오스크, 스마트워치 등 현대 사회에서 GUI (graphic user interface) 중요성 확대 -> OS, 앱 화면 및 대부분의 FE화면

 

UX ( User eXperience) : 사용자 경험 

- 성능 뿐만 아니라 , 내구성, 사후AS , 홍보로 인한 사용 연결 등 총체적으로 UX에 영향 

- FE 개발자에게는 UX 요소 중 UI가 가장 중요한 요소 

 

UI와 UX 의 관계 - UX 는 UI를 포함 

- 좋은 UX가 좋은 UI를 의미하거나, 좋은UI가 좋은 UX를 보장하지는 않지만, 나쁜 UI는 일반적으로 나쁜 UX를 유발 

 

---

UI - 디자인 패턴 

UI 디자인 패턴 : 자주 사용하는 디자인을 재사용하기 좋은 패턴으로 만든 것  (Ex. tree ui등..) 

 

• 모달 (Modal) : 기존 창 위에 오버레이 되는 창 , 팝업창과는 구분되는 개념이다. 팝업창은 브라우저에 의해 강제로 막힐 수 있지만 모달은 브라우저 설정에 상관 없이 열리기에 꼭 보여주고 싶은 정보는 모달을 이용하는 것이 바람직 
• 토글 ( Toggle) : on/ off 설정할 때 사용하는 스위치 -> 일반적으로 옵션이 2개지만 3개 이상의 옵션을 가질 수도 있음 
• 탭( Tab) : 콘텐츠를 분리해서 보여주고싶을 때 사용하는 UI 디자인 패턴 
• 태그 ( Tag) : 콘텐츠를 설명하는 키워드를 사용해서 라벨을 붙이는 역할 
• 자동완성 (Autocomplete)
• 드롭다운 (Dropdown) : 선택할 수 있는 항목을 숨겨놓았다가 펼쳐지면서 선택할 수 있게 하는 패턴 ->보통 화살표 버튼을 사용하지만 마우스를 올려놓기만 해도 펴지게 할 수도 있음 
• 아코디언 ( Accordian ) : 접었다 폈다 할 수 있는 컴포넌트 
• 캐러셀 (Carousel) : 캐러셀은 공항의 수하물 컨베이어벨트, 회전목마 등의 뜻으로 빙글빙글 돌아가며 콘텐츠 표시
• 페이지네이션 ( Pagination) : 한 페이지에 정보 표시하게 너무 많은 경우 페이지를 지정해서 번호를 붙여 구분한 것 
• 무한 스크롤 ( Infinite Scroll ) : 페이지 맨 아래 도달하면 추가 콘텐츠 로드해서 콘텐츠 전부 띄울 때까지 스크롤이 무한대
• GNB (Global Navigation Bar), LNB (Local Navigation Bar) : GNB는 어느 페이지든 사용할 수 있는 최상위 메뉴 , LNB는 GNB 종속 서브 메뉴 혹은 특정 페이지에서만 볼 수 있는 메뉴 

 

UI - UI 레이아웃 

그리드 시스템( Grid System ) 

Grid : 수직, 수평으로 분할된 격자무늬 뜻함. 

 

Margin : 화면 양쪽 여백 

Column : 컨텐츠 위치할 세로 영역 . 보통 휴대폰 4개, 태블릿 8개, pc 12개의 컬럼으로 구성 

Gutter : column 사이의 공간 -> 너무 좁거나 넓으면 부적절 

 

컬럼그리드 시스템 - 브라우저의 가로 너비가 변화함에 따라서 몇 개의 컨텐츠를 어떻게 표시할 지 다르게 구상해야 한다.

 (ex , ~768px : 컨텐츠 1개 열 표시 , 768~ 1025px : 컨텐츠 2개 열 표시 , 1025px ~ : 컨텐츠 3개 열 표시 ) 

---

UX - 좋은 UX 만드는 요소 

피터 모빌( Peter Morville)의 벌집 모형 

1. 유용성 : 목적에 맞는, 사용 가능한 기능을 제공하는가? 
2. 사용성 : 사용하기 쉬운가? ->단순, 직관적, 친숙( UI 디자인 패턴 사용) 
3. 매력성 : 매력적인가?-> 애플의 디자인 
4. 신뢰성 
5. 접근성 : 나이, 성별, 장애 여부 등과 무관하게 접근 가능한가? -> 돋보기 기능, 음성 안내 기능 등 
6. 검색 가능성 : 기능이나 정보를 찾기 쉬운가? 
7. 가치성 : 위 요소를 총합하여 고객에게 가치를 제공하는가?  특히 제품 사용자들이 중요시하는 요소에 집중. 

 

 

UX - User Flow  ( User Flow 다이어그램 )

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

User Flow 다이어그램 작성법

사용자 흐름을 다이어그램으로 작성할 때, 기본적으로 세 가지 요소를 사용

1. 직사각형 : 사용자가 보게 될 화면 ( ex. 회원 가입 페이지, 로그인 페이지 … )
2. 다이아몬드 : 사용자가 취하게 될 행동 ( ex. 로그인, 버튼 클릭, 업로드 … )
3. 화살표 : 직사각형(화면)과 다이아몬드(행동)를 연결시켜주는 화살표

이 요소들을 활용하여 사용자가 보게될 화면과 취할 수 있는 행동을 최대한 꼼꼼하게, 빠짐 없이 작성하면 된다. 

 

User Flow 다이어그램 장점 

사용자 흐름 다이어그램을 그려보면 다음과 같은 장점이 있다. 

1. 사용자 흐름 상 어색하거나 매끄럽지 않은 부분을 발견하여 수정할 수 있음
2. 있으면 좋은 기능을 발견하여 추가하거나 없어도 상관 없는 기능을 발견하고 삭제할 수 있음

 

UserFlow 다이어그램 tool

https://miro.com/ko/

모든 팀을 위한 시각 협업 플랫폼 | Miro

https://www.figma.com/figjam/

Collaborative, Online Whiteboard for Teams | FigJam

---

 

UI/ UX 사용성 평가 

 

제이콥 닐슨의 (Jakob Nielsen) 10가지 사용성 평가 기준 (Jakob’s Ten Usability Heuristics)

• 여기서, Heuristic(휴리스틱)이란? '체험적인'이라는 뜻으로, 완벽한 지식 대신 직관과 경험을 활용하는 방법론을 말합니다.

1. 시스템 상태의 가시성 (Visibility of system status)

• 합리적인 시간 내에 적절한 피드백을 통해 사용자에게 진행 상황에 대한 정보를 항상 제공해야 합니다.
  • 피드백이 존재하나요?
  • 피드백이 즉시 제공되나요?
  • 피드백이 명확한가요?
    • 예시) 파일이 첨부를 위한 파일이 업로딩 상황을 표시합니다.

2. 시스템과 현실 세계의 일치 (Match between system and the real world)

• 내부 전문용어가 아닌 사용자에게 친숙한 단어, 구문 및 개념을 사용합니다.
  • 예시) 연주 애플리케이션의 모습이 실제 악기의 생김새와 유사합니다.

3. 사용자 제어 및 자유 (User control and freedom)

• 사용자는 종종 실수를 합니다. 현재 진행 중인 작업에서 벗어날 수 있는 방법, 혹은 실수로 수행한 작업을 취소할 수 있는 방법, ’탈출구’를 명확하게 제공해야 합니다.
  • 예시) 삭제 직후에 취소할 수 있는 버튼이 잠시 나타납니다.

 

4. 일관성 및 표준 (Consistency and standards)

• 외부 일관성 : 일관적인 사용자 경험을 제공하기 위해서 플랫폼 및 업계의 관습을 따르세요.
  • 사용자에게 익숙한 UI를 제공하세요. 잘 알려진 UI 디자인 패턴을 사용하는 것이 좋습니다.
• 내부 일관성 : 사용자가 혼란스럽지 않도록 제품의 인터페이스나 정보 제공에 일관성이 있어야 합니다.
  • 예시) 한 제품 내에서 같은 인터페이스를 유지합니다.(버튼의 모양, 위치, 아이콘 크기 등)

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)

• 사용자가 이해할 수 있는 언어를 사용하여 문제가 무엇인지 정확하게 표시하고, 해결 방법을 제안해야 합니다.
  • 예시) 영문 성(Family Name)을 입력해야하는 폼에서는 한글이 아닌 영어를 입력해야 함을 정확하게 알려줍니다.

10. 도움말 및 설명 문서 (Help and documentation)

• 추가 설명이 필요 없는 것이 가장 좋지만, 상황에 따라 이해하는 데 도움이 되는 문서를 제공해야 합니다.
  • 예시) 간단한 안내를 통해 검색에 도움을 줍니다.

---