디자인 읽기

디자인 읽기

디자인, 문화, 삶에 대한 생각이 모여드는 곳. 서로의 생각을 읽고, 말하고, 행동하는 곳. 디자인 읽기는 누구나 참여가능한 즐거운 소통의 장입니다.

최근 댓글
대박뒷북이라 더 반갑네요. ^^ 역사는 디자인된다 이제야 가입했네요...대박뒷북!! 역사는 디자인된다 디자인노동조합관련하여 검색하다 들어왔는데 글이 8년전에 멈춰있네요. 궁금한게 많습니다. 현재 8년이 지난 지금.. 조금이나마 추진된 부분이 있는지요. 디자이너들 모임을 소소히 꾸려 가고있는데 정보를 얻고싶어 글을 남깁니다. 디자이너 노동조합? 기업도 사회에 어떻게든 영향을 미칠텐데 왜 사회적 기업이 따로있나요? 글에 맥락이 없어서 이해하기가 힘드네요.. '사회적 디자인'을 외치는 디자이너는 사회성이 부족하다 아름다운 성찰이십니다. 감사합니다. 디자인문화 전공이 아닌 일을 시작할 때는 어쩔 수 없는 일인 것 같아요. 저도 처음에는 제가 생각하는 그래픽 디자인인 분야가 있었어요. 하지만 일을 하면서 제 생각대로만 되는 것은 아님을 느끼게 되었죠. 그래도 경험을 쌓아가다보면 나중에 분명 커리어도 쌓이고 원하는 디자인을 뽐낼 날이 오리라 생각이 듭니다. 편집디자인=광고디자인? 그래픽?시각? 그리고 디자인 진로 고민. '디자인+아트=아름다움'이 됩니다. 결국 모두 아름다움을 목적으로 한 활동인셈이죠. 상업적 예술을 디자인으로 봐야합니까? 디자인과 아트를 구분하려는 시도가 많은 와중에 디자인과 아트를 합치면 무엇이 되는가 궁금해지네요. 상업적 예술을 디자인으로 봐야합니까? 감사합니다. ^^ 역사는 디자인된다 노력의 결실을 축하드리고, 그 노력에 경의를 표합니다. 좋은 책을 만들어 주셔서 감사합니다. 역사는 디자인된다
디자인 읽기
놓치기 쉬운 UI 디자인의 상황들
0개의 의견

 

안녕하세요! 디자인읽기에는 글을 처음 작성해봅니다. 전 디자인학교 서비스 디자인에 참여했던 디자이너 윤성권입니다. 주로 디스플레이 환경에서 서비스를 디자인 합니다. 아래의 글은 데이터라는 재료와, 서비스의 대상인 사용자의 경험을 다룰 때, 디자인 하는 사람이 쉽게 놓치기 쉬운 상황들을 정리해보았습니다. 

 

 

 

놓치기 쉬운 States of UI Design  

서비스를 디자인하다 보면 챙겨야 할게 한두 가지가 아닙니다. 어, 여기서 이 버튼 누르면 어디로 가나요? 썸네일이 없는 경우는 어떻게 하죠? 에러 케이스 빠졌는데 잡아주세요 등등, 아무리 꼼꼼히 챙기고 계속 들여다봐도 꼭 한두 개 흘리게 되고, 빠트린 페이지 뒤늦게 추가하면 이전 디자인과 충돌하는 경우가 많죠. 한참 개발이 진행되고 있는데, 디자인은 계속 바뀌고, 디자이너의 신뢰도는 점점... 으아아 살려주세요.

완벽하게 대비할 수는 없겠지만, 가능한 큰 실수 하지 않도록, UI 디자인을 할 때 고려하면 좋은 상태들을 정리해봤습니다. 재료가 되는 데이터 형태와 사용자의 플로우, 크게 두가지를 체크합니다. 먼저 데이터의 형태, 유무와 관련하여 점검해야 하는 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마다 체크리스트를 작성할 수도 있겠지만, 디자이너가 처한 환경과 서비스에 따라 굉장히 달라질 수 있기 때문에, 세세한 부분은 직접 작성하시는 편이 맞을 것 같습니다.

 

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을 번역할까 했었는데, 글이 다소 모호한 부분이 있고, 체크리스트로 쓰기에는 부족해 새로 썼습니다.

 원글주소

Mypage default

최근 댓글
대박뒷북이라 더 반갑네요. ^^ 역사는 디자인된다 이제야 가입했네요...대박뒷북!! 역사는 디자인된다 디자인노동조합관련하여 검색하다 들어왔는데 글이 8년전에 멈춰있네요. 궁금한게 많습니다. 현재 8년이 지난 지금.. 조금이나마 추진된 부분이 있는지요. 디자이너들 모임을 소소히 꾸려 가고있는데 정보를 얻고싶어 글을 남깁니다. 디자이너 노동조합? 기업도 사회에 어떻게든 영향을 미칠텐데 왜 사회적 기업이 따로있나요? 글에 맥락이 없어서 이해하기가 힘드네요.. '사회적 디자인'을 외치는 디자이너는 사회성이 부족하다 아름다운 성찰이십니다. 감사합니다. 디자인문화 전공이 아닌 일을 시작할 때는 어쩔 수 없는 일인 것 같아요. 저도 처음에는 제가 생각하는 그래픽 디자인인 분야가 있었어요. 하지만 일을 하면서 제 생각대로만 되는 것은 아님을 느끼게 되었죠. 그래도 경험을 쌓아가다보면 나중에 분명 커리어도 쌓이고 원하는 디자인을 뽐낼 날이 오리라 생각이 듭니다. 편집디자인=광고디자인? 그래픽?시각? 그리고 디자인 진로 고민. '디자인+아트=아름다움'이 됩니다. 결국 모두 아름다움을 목적으로 한 활동인셈이죠. 상업적 예술을 디자인으로 봐야합니까? 디자인과 아트를 구분하려는 시도가 많은 와중에 디자인과 아트를 합치면 무엇이 되는가 궁금해지네요. 상업적 예술을 디자인으로 봐야합니까? 감사합니다. ^^ 역사는 디자인된다 노력의 결실을 축하드리고, 그 노력에 경의를 표합니다. 좋은 책을 만들어 주셔서 감사합니다. 역사는 디자인된다
정기 이용권을 구매하세요
모든 교실을 정해진 기간 동안 이용하실 수 있습니다.
Logo modal

비밀번호 변경 메일이 발송되었습니다.

비밀번호 찾기
Logo modal

가입하신 이메일 주소를 입력하시면
해당 주소로 비밀번호 변경 메일을 보내드립니다.

비밀번호 변경 메일 받기