UX UI 공부 2일차 [ Affordance, Placeholder ]

Affordance(행동 유도성)

 Affordance란 사용자의 행동을 유도하는 사물의 속성을 말한다. 디자이너가 의도한 사용자의 특정 행동을 자연스럽게 유발하는 것이다. 예를 들어 채팅창 전송 버튼을 만든다면 누구나 쉽게 클릭할 수 있도록 디자인해야 한다. 또한 입력 창에 내용이 없으면 전송 버튼이 비활성화 상태이지만 내용을 입력하면 활성화되는 것도 행동 유도성이라 할 수 있다. 좋은 디자인은 행동 유동성도 높다.

 

 

 이번에는 Affordance를 고려하여 로그인 페이지를 만들어 볼 것이다. 핀터레스트에 있는 로그인 페이지를 모작하며 하나하나 뜯어보.. 기 전에 placeholder가 무엇인지 짚고 넘어가겠다.

 

 

Placeholder(입력 힌트)

 Placeholder는 사용자가 값을 입력하기 전에 입력값이 도움을 줄 수 있는 짧은 힌트를 입력 상자(input창)에 표시해주는 것이다. 사용자가 값을 입력하면 문자는 사라지게 된다. 로그인할 때 나오는 '이름을 입력하세요' 등이 Placeholder이다.

---

 아래 사진은 모작한 로그인 페이지이다.

이번 모작을 통해 알게 된 것들

로고 크기는 대략 130x130 px

로고와 input창의 간격은 60px

input창 roundness는 최대

input창 너비는 column 4개 이하(column 12개, width 72px, gutter 30px로 설정했을 경우)이고, 높이는 60px

input창들 간 간격은 20px

폰트 사이즈 15pt

이름 입력 칸이나 이메일 입력 칸은 회색이지만 로그인 버튼만 쨍한 컬러이다.

그리고 다들 왼쪽 정렬이지만 로그인 버튼만 가운데 정렬이 되어있다!!

 

 

 위 로그인 페이지에는 input창이 무엇인지 소개해주는 label이 없다. 만약 placeholder까지 없었다면 어땠을까? 아이콘으로 대충 짐작하여 입력할 순 있겠지만, '사용자가 자신의 이름과 이메일을 입력하는 행동'이 자연스럽게 유발되지는 않을 것이라 생각한다.

 이름과 이메일을 입력하는 input창과 다르게 로그인 버튼만 컬러가 굉장히 강렬하다. 가장 핵심적인 역할을 하는 버튼이라 다른 요소들과는 다르게 가운데 정렬이 되어있고 눈에 확 띈다.