서비스를 디자인하다 보면 챙겨야 할게 한두 가지가 아닙니다. 어, 여기서 이 버튼 누르면 어디로 가나요? 썸네일이 없는 경우는 어떻게 하죠? 에러 케이스 빠졌는데 잡아주세요 등등, 아무리 꼼꼼히 챙기고 계속 들여다봐도 꼭 한두 개 흘리게 되고, 빠트린 페이지 뒤늦게 추가하면 이전 디자인과 충돌하는 경우가 많죠. 한참 개발이 진행되고 있는데, 디자인은 계속 바뀌고, 디자이너의 신뢰도는 점점.. 으아아 살려주세요.
완벽하게 대비할 수는 없겠지만, 가능한 큰 실수 하지 않도록, UI 디자인을 할 때 고려하면 좋은 상태들을 정리해봤습니다. 크게 데이터의 형태와 Task flow, 두가지 기준에서 체크하는 형식으로 나누어 봤습니다. 먼저 데이터의 형태, 유무와 관련하여 점검해야 하는 state입니다.
Ideal / Min / Max
Maximum state
데이터 필드와 데이터의 최대치를 우선 고려하는게 좋습니다. 텍스트의 길이, 이미지 사이즈, 수량등 다양한 값이 존재합니다. 데이터가 클 경우 더보기 버튼이나 더 깊은 뎁스로 이동, 페이지 네비게이션과 그에 따른 로드 방식 등 다양한 추가 고려대상이 생겨날 수 있으니 꼼꼼히 체크해야 합니다.
Minimum state
표현될 수 있는 최소값입니다. 데이터가 없거나 적을 경우를 설계합니다. 보통 데이터가 없는 상황을 놓치기 쉽습니다.
Ideal State
사용자가 쓰기에 가장 이상적인 상태입니다.
디자인을 시작할때 최대, 최소값을 고려하지 않고 바로 Ideal State를 상상하여 그리게 되기 쉽습니다. (디자이너가 이쁘게 그리기 편한, 텍스트는 넘치지 않고 썸네일은 아름다운 상태) 심미적인 Ideal State도 필요하지만, 실제 사용 환경과 유사한 데이터를 기준으로 잡고자 노력해야 합니다. 보편적인 값, 미니멈, 맥시멈 값을 고려해 심각한 문제가 발생하지 않으며, 이상적인 형태를 찾습니다.
Ideal-Min-Max를 고려할 때 디바이스의 화면 크기와 랜드 스케이프-포트레이트 전환도 잊지 말아야 합니다. 가장 극단적인 상황은, 최대값의 최소영역 노출, 최소값의 최대 영역 노출입니다. 화면이 작은 디바이스에서 데이터가 맥시멈 값으로 들어올 때 문제가 없는가, 타블렛 랜드스케이프 화면에서 데이터가 없을 때 여백이 너무 많이 생기지 않는가 등을 점검해야 합니다.
Empty / Loading / Error / Active / Inactive
데이터의 유무에 따른 좀더 다양한 상태를 정의해 봅시다.
Empty state
데이터가 존재하지 않는 경우입니다. 사용자가 아직 한번도 데이터를 쌓지 않았거나, 기존의 데이터를 지웠을 수 있습니다. 아니면 과제를 전부 수행해서 To do가 비어있을 수도 있습니다. “데이터가 없습니다.”라고 건조한 메시지를 노출해도 되지만, 사용자를 독려하여 서비스 사용을 유도할 수 있는 좋은 기회입니다.
Loading state
데이터를 불러오는 동안 노출할 형태입니다.플레이스 홀더, 로딩 때마다 달라지는 메시지 등 다양한 형태의 로딩 화면을 통해 사용자의 불편을 최소화 할 수 있습니다. LTE 무제한을 누리는 내 아이폰6S에서는 거의 볼 수 없는 화면이지만, 당연히 고려해야 합니다.
Error state
다양한 이유로 데이터를 불러오지 못할 수 있습니다. 웹페이지의 404, 500에러 등.. 다양한 경우가 존재합니다. 크게 페이지를 호출하지 못하는 경우와, 썸네일을 불러오지 못하는 경우를 준비합니다.
Active / Inactive state
활성화, 비활성화 된 상태를 정의합니다. Task flow를 중심으로 체크했을 때 발생하지 않는다면, 고려하지 않아도 되는 상황이지만, 알림을 받고 해당 페이지로 랜딩 되었을 때 하일라이트 처리를 한다거나, 사용자가 편집 권한을 가지고 있지 않을 때 비활성화 한다거나, 다른 유사한 상황을 대비해 정의해 두면 좋습니다.
이제 사용자의 Task Flow를 따라가는 방식으로 놓치기 쉬운 상태를 체크해보겠습니다. 인터페이스의 상태가 데이터와 플로우, 두 기준으로 딱 나뉘지는 않습니다만, 둘 중 하나의 관점에서만 체크하면 누락되는 부분이 있음으로, 편의상 나누어 보았습니다.
Onboarding / Nth / Landing
Onboarding
처음 서비스, 화면을 접하게 되었을 때를 고려합니다. 위에서 이야기한 Empty state와 유사하지만, 사용자의 Task flow, 앱 사용 경험을 기준으로 생각하면 무척 다른 결과가 나올 수 있습니다. 예를 들어, 폐쇄형 SNS에서 타임라인에 처음 접근하게 되었을 때, 아직 친구를 맺은 사람이 없다면 글쓰기를 유도하는 형태의 디자인은 의미가 없습니다. 빈 벽을 향한 공허한 외침이 될테니까요. 차라리 친구를 추가하고 인맥을 형성하도록 유도하는 편이 더 날 수 있겠지요. 이외에 인터페이스에 대한 가이드 이미지나, 데모 데이터, 인사말 등을 고려할 수 있겠습니다.
N번째 사용
사용자가 처음 Task를 완료했을 때, 이후 1회, 2회, 10회, 100회.. 누적되어 데이터가 쌓였을 때를 고려해 봅니다. 사실 사용자의 상태와 행동을 모두 고려하여 작성한 User Story를 기반으로 체크하지 않는 이상, 치밀한 점검은 어렵습니다. 설계 단계에서 유저스토리를 모두 점검하며 디자인 하기는 쉽지 않죠. 큰 실수를 방지 하기 위해 사용자가 처음 서비스를 사용할 때, 서비스에 정착하는 단계일 때, 꾸준히 사용하는 액티브 유저가 되었을때의 세단계 정도는 고려해 보는 게 좋습니다.
Landing
메뉴탭을 통해 이동하지 않는 경우를 고려합니다. 알림이 있는 서비스일 때 이런 경우의 수가 많이 발생합니다. 사용자가 서비스의 알림 패널을 통해 해당 페이지로 바로 접근했을 경우, 어떻게 노출할 것인가를 고려합니다.
Incorrect / Correct / Done
Incorrect
사용자가 동작을 수행했을 때, 정보가 부적합하거나 형식이 맞지 않는 경우, 기타 에러를 발생시키는 경우입니다. 보통 에러메시지를 노출할 공간을 미리 계획하지 않아 골치아파지는 상황이 많습니다.
최근에는 보다 빠른 피드백을 위해 동작을 수행하는 도중에도 정보의 적합 여부를 검출하여 알려주는 형태도 보입니다.
Correct
사용자가 과제를 수행했을 때( 또는 수행 중일 때) 제대로 진행되고 있다는 피드백을 고려해야 합니다. 서비스의 설정을 변경 했는데, 제대로 된 피드백이 없어 이게 지금 제대로 바뀐 건가 헤맨 경험이 있으실 겁니다.
Done
사용자가 과제를 완료했습니다! 사용자를 독려하고 칭찬할 때 입니다! 다음 과제를 위한 길도 열어두어야 합니다.
Btn State
Normal, Rollover, Mouse Down, Active.
플래시나 웹페이지 설계를 통해 익숙한 버튼의 상태입니다.
모바일 어플리케이션 환경에서는 대체로 Roll over(마우스 오버)가 불가합니다. 데스크탑 기반 웹페이지도 태블릿 등의 사용 환경을 고려해서 롤 오버 상태에 기능을 넣는 것은 지양하는게 좋습니다. 이외에 페이지를 리로드해도 Active state를 들고 있을 것인가 등 추가적으로 고려할 상황이 있을 수 있습니다.
버튼을 제외하고도 대략 14개의 state를 정의할 수 있었습니다. 많습니다.
하지만 필요한데 누락하면 결국 언젠가 잡아야 되더군요..
아래의 형태로 메모장에 적어두고 체크했는데, 자주 놓쳐서 한번 정리해 보았습니다. 더 세분화하여 해당 State마다 체크리스트를 작성할 수도 있겠지만, 디자이너가 처한 환경과 서비스에 따라 굉장히 달라질 수 있기 때문에, 세세한 부분은 직접 작성하시는 편이 맞을 것 같습니다.(세부리스트까지 작성하면 거의 1인 Design QA팀이 되는… 후후)
Ideal / Min / Max
Empty / Loading / Error / Active / Inactive
Onboard / Nth / Landing
Incorrect / Correct / Done
Normal / Rollover / MouseDown / Active
최근 미디엄에서 The Nine States of Design라는 글이 화제가 되었죠. 해당 글은 컴포넌트 중심으로 디자인 하면서 놓치게 되는 상황들을 플로우 중심으로 체크하는 형태였습니다. 그외에도 Onboarding이나 Empty State의 중요성에 관한 글이 많이 나오고 있습니다.
저는 한 반년쯤 전에 UI Design State에 관한 글을 미디엄에서 보고 참고해서 간단한 메모 형식으로 정리해 뒀었습니다. 당시에는 Min / Max / Empty등 7가지 정도의 State였던 걸로 기억합니다. 그때 본 글은 지워졌는지 아무리 찾아도 찾을 수가 없어 남기지 못합니다.
처음에는 그냥 The Nine States of Design을 번역할까 했었는데, 글이 다소 모호한 부분이 있고, 체크리스트로 쓰기에는 부족해 새로 썼습니다.
