[기획] UX/UI Design

Index

1. UX/UI Design

Reference

---

1. UX/UI Design

UX/UI Design

1. 사용자를 고민에 빠뜨리지 말 것

- 누구나 알아볼 수 있도록 명확하게 만들어야함.(직관적인 단어 / 직관적인 디자인)

- 사용자는 웹페이지는 읽지 않고 훑어본다.

- 사용자는 최소 조건만 충족되면 만족한다.

- 사용자가 찾는 것을 쉽게 발견하는 사이트를 만들어야 함.

 

2. 유저의 이탈을 막는 질문 작성법

- 사용자는 필요한 곳만 판단하여 봄.

1)관례를 사용할 것(기존에 표준화된 방법)

2) 시각적 계층구조를 효과적으로 구성할 것(중요한 부분이 눈에 띄도록, 요소 간 논리적인 연계를 시각적으로 표현)

3) 페이지의 구역을 또렷하게 구분(유저의 시선의 흐름에 따라 중요도 순으로 배치)

4) 클릭할 수 있는 요소를 명확히 표시(클릭할 수 있는 영역과 아닌 곳을 유사하게 디자인하지 말 것)

5) 주의를 흩뜨릴만한 요소를 없애라(시끄러움, 무질서, 어수선함)

6) 내용을 훑어보기 좋은 방식으로 구성(제목을 많이 넣기, 단락의 길이를 짧게 유지, 불릿 목록을 사용, 주요 용어를 강조)

7) 유저가 답하기 어려운 질문은 지양하라(간결성, 적시성, 불가치성을 지키기)

 

3. 웹 네비게이션을 디자인할 때 꼭 지켜야 하는 원칙

1) Persistent Navigation(Global Navigation)

- 페이지를 이동해도 항상 고정된 자리에 존재하는 웹 내비게이션

2) 페이지 이름

- 모든 페이지는 이름이 필요 / 이름의 위치가 적절(광고가 아님) / 이른이 눈에 띄어야함 / 이름이 클릭한 것과 일치

3) 현재의 위치 표시

4) Breadcrumb

- 어떤 경로를 통해 해당 페이지까지 흘러들어왔는지 표기

- 유저의 눈에 잘 띄게 직관적으로 표현(맨 꼭대기에 두기 / 각 단계 사이에 > 넣기 / 마지막 항목은 볼드체)

 

(UX/UI 디자인적으로 사용자가 겪게 되는 행동과 사고의 흐름을 도식화한 Task Flow)

 

4. 우리 사이트의 첫인상을 결정하는 웹 디자인

- UX/UI 디자인 측면에서 전체적인 그림을 보여줘야함

- 무슨 사이트인지 / 무엇을 할 수 있는지 / 무슨 내용이 담겨 있는지 / 어디서부터 봐야하는지 / 다른 사이트와 차별점

- 유저가 아는 것은 없음 / 설명은 단순 불피요한 것이 아님 / 유저들은 생각보다 스스로 알아내지 못함 / 광고는 광고. 하고싶은 말은 사이트에서 해야함.

- 중요한 메시지는 어떻게 표현할지 고민할 것(태그라인, 환영문구)

- 홈페이지의 원래 목적을 흐리지 않게 하기 위해 이해 가능한 가이드라인을 세워서 강조할 메시지를 선별

 

5. '유저가 좋아할까?'라는 고민의 부질없음 

- 개개인의 기호는 모두 다르기 때문에 모든 사용자의 의견을 수렴할 수는 없음.

- 평균 사용자라는 것은 존재하지 않음.

1) 완벽하게 평가해내야 한다는 강박을 버릴 것

- 소수라도 꾸준하게 진행(정성적 평가) / 모든 문제를 찾아내는 것이 아닌 심각한 문제를 찾기 / 이상적인 평가자를 찾는데 힘쓰지 말 것

2) 사용성 평가는 프로젝트 초반에 가까울수록, 평가 주기는 짧을수록 좋음.

3) 기본적인 것에서 치명적인 실수하는 것을 조심할 것

- 유저가 사이트의 컨셉을 이해하지 못함 / 유저가 찾는 키워드, 유저가 실제 사용하는 단어와 다른 단어 사용 / 페이지에 너무 많은 내용이 존재

4) 문제를 찾고 수정

- 평가자들간의 중복체크로 심각한 문제를 찾기 / 심각한 순서로 순위를 매길 것 / 체크리스트를 만들어 담당자를 지정

 

6. 모바일, 더 빨리 더 적게 읽는다.

- 웹 보다 더 빨리 움직이고 더 적게 읽음

- 트레이드 오프를 고려할 것(더 중요한 것을 취하고 포기할 것에 대한 대안을 마련)

- 각 팀의 이해관계가 아닌 사용자에게 좋은 경험을 만들어 주기 위한 트레이드 오프를 고려

- 모바일은 화면 공간이 부족하기에 사용자에게 중요한 기능이나 콘텐츠로 채운 모바일 버전을 먼저 디자인후, 추가적인 기능을 더하기

- 급하게 혹은 자주 사용하는 것은 가까이, 잘 보이는 곳에 두어야 함.

 

 

2.

 

3. 

 

4.

 

5. 

 

---

Reference

[Blog: Fastcampus Media(사용자를 고민에 빠뜨리지 말라)] https://media.fastcampus.co.kr/knowledge/dgn/uiuxdesign-basic/

[Blog: Fastcampus Media(유저의 이탈을 막는 질문 작성법)] https://media.fastcampus.co.kr/knowledge/uiuxdesign-basic-2/

[Blog: Fastcampus Media(웹 내비게이션을 디자인할 때 꼭 지켜야하는 원칙)] https://media.fastcampus.co.kr/knowledge/uiuxdesign-basic-3/

[Blog: Fastcampus Media(우리 사이트의 첫인상을 결정하는 웹 디자인)] https://media.fastcampus.co.kr/knowledge/uiuxdesign-basic-4/

[Blog: Fastcampus Media('유저가 좋아할까?'라는 고민의 부질없음)] https://media.fastcampus.co.kr/knowledge/uiuxdesign-basic-5/

[Blog: Fastcampus Media(모바일, 더 빨리 더 적게 읽는다.)] https://media.fastcampus.co.kr/newsletter/wennews/uxuidesign-basic-6/