[하루 5분 UX] 와이어프레임과 프로토타입

---

와이어프레임이 아닌 것은

1. 와이어프레임은 기본 스케치가 아니다

2. 좋은 와이어프레임은 시간이 걸린다

3. 와이어프레임은 과정으로 존재하지 않는다

4. 와이어프레임은 진지하게 다루어져야 한다

5. 와이어프렝림은 보여주기 위한 것이 아니다

 

---

툴이 아닌 기술을 배워라

최고의 솔루션을 디자인하라

언제나 원하는 것을 먼저 디자인해본 뒤 이를 기술적 문서로 옮겨줄 와이어프레임을 찾아 사용해야 한다.

 

---

다양한 상황을 고려하라

• 대부분의 사용자가 어떻게 행동할지 생각하지 마라.
• 사용자가 디자인을 가장 잘못된 방법으로 사용할 수 있는 경우를 상상해야 한다.

 

---

Z-패턴, F-패턴, 시각적 계층

Z-패턴

• 사용자는 보통 Z-패턴으로 왼쪽 상단부터 오른쪽 하단까지 훑는다.

 

F-패턴

• Z-패턴과 마찬가지로 왼쪽 상단 모서리에서 시작해 헤드라인을 읽고, 왼쪽의 열을 따라 아래로 스캔한다.
• 이 방법을 반복함으로써 스캐닝 패턴이 F처럼 보이게 된다.

 

✔️ 사람들은 왼쪽 상단의 버튼을 오른쪽 상단의 버튼보다 더 많이 클릭할 것이고, 오른쪽 상단 버튼을 왼쪽 하단 버튼보다 더 많이 클릭할 것이며, 왼쪽 하단 버튼을 오른쪽 하단 버튼보다 더 많이 클릭할 것이다.

 

---

페이지 프레임워크

푸터

• 정적인 페이지로 연결되는 링크의 목록

 

내비게이션

 

---

폴드, 이미지, 헤드라인

Fold

• 사용자가 스크롤을 하기 전에 보이는 디자인 영역을 뜻한다. 
• 폴드 위에 있는 영역 전체는 사용자의 눈에 잘 보인다.
• 폴드 위에 어떤 내용이 있든 상관없이 폴드 아래에 무엇이 있는지 사용자가 알 수 있어야 한다. 

 

헤드라인

• 사람들이 스캔을 시작하는 곳에 헤드라인을 배치시켜야 한다.
• 헤드라인 아래에는 가장 중요한 내용이 배치되어야 한다. 

 

---

인터랙션 축

엣지를 찾아라

• 각각의 엣지는 인터랙션 축이다.
• 사용자의 관심은 보통 인터랙션 축에 고정되어 있고, 그 관심이 사라지면 다른 인터랙션 축으로 이동한다.
• 사람들이 클릭하기를 바라는 버튼이 있다면 인터랙션 축 위에 두어라.

 

---

폼

• 폼의 목적은 사용자가 입력하는 정보를 수집하는 데 있다.
• 양질의 답을 얻을 수 있는 가장 좋은 입력 유형을 선택해야 한다.

 

체크박스 - 2가지 이상 / 라디오 버튼 - 하나의 옵션

 

 

 

• 종종 질문이 낯선 내용이거나 복잡할 때는 설명이 필요할 수도 있다. 그럴 때 약간의 설명을 덧붙이면 도움이 된다.
• 예를 들어, 텍스트 창에 전화번호를 입력해야 한다면 몇 가지 형식을 처리할 수 있도록 만들어라. (00000000000, 000-0000-0000 등)
• 사용자가 실수하거나 질문을 놓친다면 그들이 수정할 수 있도록 알려줘야 한다.

 

---

주요 버튼과 보조 버튼

• 일반적으로 대다수의 사용자 행동은 다음 2가지 범주 중 하나에 속하기 때문에 2개의 버튼 스타일만 있으면 된다.

 

1. 우리의 목표를 이루는 데 도움이 되는 주요 행동

2. 우리의 목표를 이루는 데 도움이 되지 않는 보조 행동

 

 

주요 버튼

• 사용자가 할 수 있는 행동 중 일부는 가입, 구매, 저장, 송부, 공유, 콘텐츠 제공 등과 같이 생산적이다. 이러한 행위는 이전에는 존재하지 않았던 것을 생산한다.
• 이를 '주요 행동'이라 하며, 우리는 사용자들이 가급적이면 주요 행동을 더 자주 하기를 바란다.

 

주요 스타일

• 배경과 확연히 구분되는 높은 대비

 

레이아웃 내 위치

• 사용자가 보는 즉시 반사적으로 알아차릴 수 있도록 인터랙션 축 위 혹은 근처에 두기

 

보조 버튼

• 사용자가 할 수 있는 행동 중 일부는 취소, 건너뛰기, 재설정, 제안 거절처럼 비생산적이다.
• 이러한 행위는 새로운 것을 창작하지 못하게 하거나 저해한다. 이를 '보조 행동'이라 하며, 사용자들이 보조 행동을 하지 않길 바라지만 사용성 측면에서는 옵션을 제공해야 한다.
• 보조 행동을 실행하는 버튼을 실수로 누르거나 반사적으로 클릭하는 경우를 막기 위해 눈에 덜 띄는 곳에 배치해야 한다.

 

보조 스타일

• 배경과 비슷하도록 낮은 대비

 

레이아웃 내 위치

• 사용자가 필요할 때 의식적으로 찾아야만 보일 수 있도록 인터랙션 축에서 멀리 떨어진 곳에 두기

 

중요 버튼

• 간혹 계정 삭제처럼 비생산적인 행동이 중요할 때가 있다. 이러한 행동은 레이아웃상 보조 위치에 주요 스타일로 디자인해야 한다.
• 사용자가 그 버튼을 찾을 수 있게 해줘야 하지만 실제 실행하기 전에 그들이 다시 생각해보길 원하기 때문이다.
• 이런 종류의 버튼은 행동의 중요성을 상기하기 위해 경고를 뜻하는 색(빨강, 오렌지, 노랑 등)으로 디자인하는 것이 좋다.

 

특수 버튼

• 때로는 웹 사이트나 애플리케이션에서만 실행하는 특별한 유형의 행동이 있을텐데, 여기에는 특별한 관심이 요구된다.
• 아마존의 '원 클릭 구매' 버튼, 핀터레스트의 '핀잇' 버튼, 페이스북의 '좋아요' 버튼은 모두 이 디자인 처치를 받은 것이라 할 수 있다.

 

---

적응형 디자인과 반응형 디자인

 

각각에 맞게 설계하는 적응형 디자인(Adaptive Design)

• 적응형 디자인은 주요 디바이스 몇 개를 골라 각각에 맞게 설계한 디자인을 뜼한다.

 

ex) 인터넷 쇼핑몰 운영

모바일 디바이스 / 데스크톱을 통해 쇼핑몰 방문

 

• 작은 휴대전화 크기 버전과 데스크톱 버전 2가지를 디자인해야 한다.
• 적응형 디자인은 만들기가 쉽고 시간이 적게 걸린다. 

 

모든 스크린에 적용되는 반응형 디자인(Responsive Design)

• 반응형 디자인은 윈도우 사이즈가 달라지면 그에 맞춰 '늘어나고' '조정'되기 때문에 디바이스의 종류와 스크린 해상도에 상관없이 완벽하게 작동한다.
• 레이아웃이 영원히 늘어나면서 계속 형태를 유지하는 것은 불가능하다.
• 언제 어떤 기능을 보여주거나 숨길 건지, 디자인이 틀어지기(break) 전에 어디까지 늘어나게 할 건지, 그래서 언제 레이아웃을 변경해 해당 사이즈에서 더 잘 보이게 할 건지 등을 결정해야 한다.
• 이렇게 하고 나면 윈도우가 커지거나 작아질 때 웹 사이트가 디자인을 자동으로 조정해 모든 사용자에게 완벽한 경험을 제공한다.