UI/UX

1. UI UX가 무엇일까?

UI(User Interface)

사람들이 컴퓨터와 상호 작용하는 시스템

 

화면상의 그래픽 요소들 외에도

컴퓨터와 상호작용을 위한 시스템인

키보드, 마우스등의 물리적 요소도 포함

 

핸드폰을 예시로 들었을때

과거에는 번호키 등 물리적 요소가 중요했지만

터치폰이 대중화되면서 화면 터치를 통한 상호작용이 중요해짐

👉🏻 그래픽 UI 중요도 높아짐

 

컴퓨터

마우스의 등장 이후로

👉🏻 그래픽 UI 중요

CLI와 키보드를 이용해 텍스트로 상호작용하는것보다 

화면에서의 상호작용이 더 직관적, 간편함

 

이 둘 뿐만 아니라

스마트워치, 키오스트, 터치스크린 안내판 등 상호작용하는 기기들

👉🏻  GUI 굉장히 중요함

 

UX(User Experience)

사용자가 어떤 시스템, 제품, 서비스를 직 간접적으로 이용하면서 느끼고 생각하는 총체적 경험

 

서비스 그 자체에 대한 경험

홍보, 접근성, 사후처리 등 말그대로 총체적 경험

 

핸드폰

성능이 뛰어나지만

내구성이 좋지 않다면,

홍보가 잘되지 않았다면,

사후 처리 시스템이 좋지않다면,

👉🏻  UX 안좋음

 

프론트엔드에서 UX에 가장 영향을 많이 끼치는것은 UI

 

만약에 홈페이지에 들어갔는데

정렬도 안되어있고 글자크기도 뒤죽박죽이면 UX가 좋지 않다.

 

2. UI와 UX의 차이점

UX는 UI를 포함한다.

HOWEVER !

좋은 UX !== 좋은 UI	좋은 UI !== 좋은 UX
투박한 디자인의 계산기 하지만 계산이 잘 된다면? 훌륭한 UX	세련된 계산기 결과값 제대로 안나온다? 안좋은 UX

UI UX는 서로 보완하는 역할

UX가 좋지 않은 곳을 찾아냄으로써 UI개선점 찾아낼 수 있고

UI를 개선함으로써 UX가 좋아지기도 한다.

 

3.  UI 디자인 패턴

- 모달

- 토글

- 탭

- 태그

- 자동완성

- 드롭다운

- 아코디언

- 캐러셀

- 페이지네이션

- 무한 스크롤

- GNB(Global Navigation Bar), LNB(Local Navigation Bar)

 

외에도 다양한 UI디자인이 있다.

Design patterns

그리드 시스템(Grid System)

화면을 세로로 몇 개의 영역으로 나눌 것인가에 초점을 맞춘 시스템

Margin, Column, Gutter 세가지 요소로 구성

Margin : 화면 양쪽의 여백Column : 콘텐츠가 위치하게 될 세로로 나누어진 영역

Gutter : Column 사이의 공간

 

4. UX 디자인

- 유용성

- 사용성

- 매력성

- 신뢰성

- 접근성

- 검색가능성

- 가치성

피터 모빌의 벌집모형

 

 

 

 

UX를 위해서 고려해야할 7가지 요소 제시

UX 평가 척도에 사용

UX개선하고자 할 때 사용자 설문조사를 통해 개선점을 찾아 낼 수 있다.

User Flow

사용자가 제품에 진입한 시점을 시작으로 취할 수 있는 모든 행동

보통 다이어그램을 그려서 정리한다.

 

다이어그램에는 기본적으로 세가지 요소를 사용한다

1. 직사각형 : 사용자가 보게 될 화면 (ex. 로그인 페이지)

2. 다이아몬드 : 사용자가 취하게 될 행동(ex. 버튼클릭,로그인)

3. 화살표 : 직사각형(화면)과 다이아몬드(행동)를 연결시켜주는 화살표

 

다이어그램 그리면 좋은 이유?

1. 사용자 흐름 상 어색하거나 매끄럽지 않은 부분을 발견하여 수정가능

2. 있으면 좋은 기능을 발견하여 추가하거나 없어도 상관 없는 기능을 발견하고 삭제 할 수 있음

 

User Flow 다이어그램 도구

Miro

FigJam

The Online Collaborative Whiteboard for Teams

UI/UX 사용성 평가
제이콥 닐슨의 10가지 사용성 평가 기준(Jakob's Ten Usability Heuristics)
Heuristics : 체험적인, 완벽한 지식 대신 직관과 경험을 활용하는 방법론

1. 시스템 상태의 가시성

- 합리적인 시간 내에 적절한 피드백을 통해 사용자에게 진행상황에 대한 정보를 항상 제공

 

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

- 내부 전문용어가 아닌 사용자에게 친숙한 단어 개념 사용

 

3. 사용자 제어 및 자유

- 실수로 수행한 작업을 취소할 수 있는 방법

 

4. 일관성 및 표준 

- 외부일관성 : 일관적인 사용자 경험을 제공하기 위해서 업계의 관습을 따른다.

- 내부일관성 : 사용자가 혼란스럽지 않도록 제품의 인터페이스나 정보 제공에 일관성이 있어야 한다.

 

5. 오류방지

-오류가 발생하기 쉬운 상황을 제거하여 사용자의 실수를 방지해야합니다.

ex. 삭제 버튼 눌렀을 때 정말 삭제할 것인지 의사를 확인

 

6. 기억보다는 직관

- 사용자가 기억해야하는 정보를 줄인다.

ex. 최근 검색 목록

 

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

- 초보가와 전문가 모두에게 개별 맞춤 기능 제공

ex. 프로그램의 단축키 직접 설정

 

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

- 인터페이스에는 관련이 없거나 불필요한 정보가 포함되지 않도록 한다

ex. 사용빈도가 적은 메뉴를 다 보여줄 필요 없다.

 

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

- 사용자가 이해할 수 있는 언어를 사용해서 문제가 무엇인지 정확하게 표시, 해결방법 제안

ex. 영문 성을 입력해야 하는 폼에서는 한글이 아닌 영어를 입력해야 함을 정확하게 알려준다.

 

10. 도움말 및 설명 문서

- 상황에 따라 이해하는데 도움이 되는 문서 제공

ex. 간단한 안내를 통해 검색에 도움을 준다.