[사용자를 끌어들이는 UX/UI의 비밀] - 문제를 정확히 파악하고 제대로 해결하는 디자인
2021. 10. 10. 18:14ㆍDesign/UX
최근 시작한 북 스터디 책은, 요즘 가장 핫한 UX 서적 중 하나인 '사용자를 끌어들이는 UX/UI의 비밀'이다.
첫 출간한지는 시간이 좀 되었는데, 개정을 해서 내용도 올드하지 않다. 이 책은 오프라인 서점 UX 서적에서 직접 처음으로 봤는데 ,.. 살짝만 봐도 정말 '이건 꼭 사긴 해야겠다!' 싶었다.
재질부터 매거진 재질? (이건 단점일 수도) 이면서 정말 UX 백과사전인 듯 했다. 그도 그럴만한게, 총 페이지가 580페이지에 이른다.
총 12장으로 구성되어 있으며, 각 장 별로 그에 해당하는 UX/UI 패턴이 스크린샷과 함께 소개된다. 이렇게 총 80가지의 패턴들을 소개한다. 간단하게 모바일 디자인 시스템 UI에서 보고, 익히는 베이직한 부분들을 넘어 여러 인터페이스를 포함하는 정말 다양한 UI들을 공부할 수 있을 듯 하다.
첫 장은 이런 비주얼적인 UI 패턴 이전에, '문제를 정확히 파악하고 제대로 해결하는 디자인' 이라고 UX 이론적인 내용으로 시작된다.
이번 장에서는 비주얼적인 인터페이스는 그저 소프트웨어를 사용하는 사용자의 목표를 달성할 수 있게 만들어주는 '수단'일 뿐이라고 한다.
사용자 인터페이스는 그저 '사용자'와 '소프트웨어' 간의 대화를 중재하는 수단이고,
UX/UI 디자이너는 이 대화의 각본을 쓰거나 대화 용어들을 정의하며 소프트웨어와 사용자가 의미있는 대화를 나눌 수 있게 도와주어야 한다는 것이다.
그러니까 책에서 말하는 80가지의 패턴을 적용하기 이전에 사용자에게 중요한 게 무엇인지, 사람들이 소프트웨어를 어떻게 사용하는지 이
해하는 것이 왜 중요하고 어떤 성과를 얻을 수 있는지 알아봐야 한다.
따라서 이번 글은 해당 1장에 대한 내용을 정리하고자 한다.
사용자가 어떤 사람이고, 왜 이 소프트웨어를 사용하려 하며, 어떻게 사용하는 지를 알아야 한다.
그를 위해서는 사용자에 대한 이해와 공감이 필수적이라는 것!
<사람을 위한 디자인 프레임워크를 구성하는 4가지 영역> 컨텍스트 : 사용자는 누구인가? 목표 : 사용자는 무엇을 하고자 하는가? 리서치 : 사용자의 전후 사정과 목표를 이해하는 방법 패턴 : 인터페이스 디자인과 관련된 사용자 인식과 행동
위의 프레임워크를 주기적으로 되새긴다면, 사용자를 위한 최상의 결과를 만들어 내는 방향으로 나아갈 수 있다.
그 어떤 책이나 아티클, 논문을 읽던지 간에 정석인 개념이 있다면 "당신은 사용자가 아니다"라는 말이 아닐까 싶다.
그래서 콘텐츠와 기능은 사용자에게 맞추어야 한다.
사용자가 어느 정도의 지식을 가지고 있는지? 숙련도는 어떠한지에 따라 그 제품은 다르게 작동하여야 한다.
1. 사용자가 어느 정도의 지식을 가지고 있는가?
사용자에게 얼마나 많은 자유를 허용할 것인지 선택해야 한다.
자유도가 낮은 소프트웨어는 소프트웨어 설치 마법사를 예시로 들었고, 높은 소프트웨어는 마이크로소프트 엑셀을 예시로 들었다.
전자는 다른 선택지가 없으나, 후자는 정말 자유로운 선택지가 있어 열린 평면 (Open floor plan)의 형태를 띈다.
2. 사용자의 툴 관련 지식 수준은 어느 정도인가?
사용자의 툴 관련 지식 수준을 어떻게 가정하는 지에 따라 인터페이스가 달라진다.
이에 따라 화면 공간이나 레이블, 위젯의 복잡도, 도움말의 위치 등이 달라진다.
소프트웨어 이용 빈도가 낮은 초급 사용자의 경우는 하나하나 그 단계를 설명해 주고, 정말 직관적일 것이다.
마치 나이 많은 어르신도 ATM기를 문제없이 사용하는 것 처럼.
그러나 코딩 프로그램 같은 경우는, 그 어떤 설명도 적혀있지 않다.
또한 이 프로그램을 학습하기 위한 유료 강의와 책들 또한 많다.
이는 하나하나 도움말이 없어 '불친절'하다 해서 잘못 설계된 소프트웨어일까?
아니다. 사용자가 무엇을 할 지 알 것이라 가정하여 그 안에서 최대한 효율적이고 고급 기능을 수행할 수 있도록 설계된 소프트웨어일 뿐이다.
이 둘은 극단적 예시라 볼 수도 있는데,
보통 우리가 접하는 소프트웨어들은 이 중간에 위치할 것이다.
언제나 상황에 맞게 균형을 잡는 것이 중요하다.
"Why" 접근법을 이용하자.
인터페이스를 디자인 할 때에는 언제나 왜 그 기능이 필요한지 물어보고, 단기 목표가 무엇인지 판단하여야 한다.
진짜 문제를 해결해서 사용자가 목표를 달성하는 것이 진정한 인터페이스 디자인이라고 할 수 있다.
호기심을 가지며 사용자들이 어떤 사람이고 어떤 생각을 가지며 느끼는지 발견하는 데에 집중한다면, 사용자들의 현실을 충분히 반영할 것이다.
사용자를 있는 그대로 이해하는 법
역시, 가장 좋은 방법은 '사용자를 만나는 것'이다.
일대일 인터뷰와 같은 정성 조사는 사용자의 기대치나 평소 사용하는 단어를 파악하고 목표에 대해 어떻게 생각하는지, 자신의 일을 어떻게 구조화하는지 이해하는 토대가 된다.
<사용자에 관해 알아야 할 것들> - 소프트웨어나 웹사이트를 사용하는 목표 - 목표를 달성하기 위해 수행하는 특정 태스크 - 무엇을 하고 있는지 묘사하는 데 쓰는 언어와 단어 - 기존의 유사한 소프트웨어를 사용하는 스킬 - 기존의 유사한 소프트웨어에 대한 태도와 디자인이 그러한 태도에 미치는 영향
직접 관찰
인터뷰와 현장방문 조사는 즉각적으로 사용자를 관찰 하는 데에 도움을 준다. 그 어떤 형식이여도 상관없다.
케이스 스터디
몇몇 대표 사용자나 사용자 그룹에 관해 깊고 상세한 관점을 제공한다.
실제 사용 맥락에 대해 탐구할 수 있는 기회이다.
설문조사
여러 사용자들에게 정량적인 정보를 수집할 수 있다. 통계적으로 유의미한 숫자의 응답자를 모집 가능하지만,
그만큼 타깃 고객을 잘 잡고 질문을 섬세하게 설계해야 한다. 그 후 응답을 제대로 분석하는 것이 제일 중요하다.
퍼소나(Personas)
데이터를 확보한 이후, 분석 시에 이정표가 되어준다.
퍼소나는 타깃 고객을 모델링할 때 용이하다. 어떤 작업을 수행하려 하는 지, 최종 목표는 무엇인지, 도메인 경험과 일반적인 컴퓨터 사용 수준은 어느 정도인지 등의 정보를 담는다.
퍼소나를 모델링 한 후에는 우리는 "퍼소나가 이 테스크를 할까? 하지 않는다면 어떤 작업을 할까" 라고 질문을 던져볼 수 있다.
인터페이스에서 사람들은 무슨 생각을 하고 어떻게 행동할까?
사용자의 목표를 더 효과적으로 달성할 수 있게 도와주는 인터페이스 패턴들이 있다.
인터페이스와 그 뼈대를 이루는 구조, 기능, 문서화를 포함한 총체적 패키지가 이런 행동 패턴을 염두에 두고 디자인되어야 한다.
안전한 탐색 (Safe Exploration) 즉각적 만족 (Instant Gratification) 만족화 (Satisficing) 중도에 바꾸기 (Changes in Midstream) 선택 미루기 (Deferred Choices) 점진적 창조 (Incremental Construction) 습관화 (Habituation) 짬시간 활용 (Microbreaks) 공간 기억 (Instant Gratification) 미래 계획 기억 (Prospective Memory) 능률적 반복 (Streamlined Repetition) 키보드만 사용하기 (Keyboard Only) 소셜 미디어 (Social Media), 소셜 프루프 (Social Proof), 협업 (Collaboration)
1. 안전한 탐색 (Safe Exploration)
길을 잃거나 곤경에 빠지지 않고 탐험할 수 있게 해줘.
인터페이스를 탐험하면서 실수하더라도,
최악의 상황을 겪지는 않을 것이라는 믿음만 있다면 사용자는 더 많이 배우고 더 긍정적으로 경험한다.
잘 만든 소프트웨어를 쓸 때는 새로운 기능도 시도해 보고, 잘 되지 않으면 스트레스를 받고 다른 작업을 한다.
효과적인 사용성 원칙 (10 Usabily Heuristics for User Interface Design, 제이콥 닐슨) 중 일부 - 시스템 상황을 보여준다. - 시스템과 현실 세계를 일치시킨다. - 사용자에게 통제권과 자유를 부여한다.
2. 즉각적 만족 (Instant Gratification)
나중에 말고 바로 지금, 이걸 하고 싶어.
사용자의 목표 (ex. 상품 구매) 를 위해 콜투액션 버튼을 눈에 띄는 곳에 배치
사람들은 행동을 하면 어떤 결과가 나타나는지 바로 보고 싶어한다.
사용자가 목표로 하는 작업을 뒤로 숨겨서는 안되고, 분명한 시작점을 제공해야 한다.
3. 만족화 (Satisficing)
이 정도면 충분해. 더 잘하는 법을 배우는 데 시간을 쓰고 싶지 않아.
만족스러운 (Satisfying) + 충분한 (Sufficing)
- 허버트 사이먼, 1957
다른 대안을 배우는 데 시간이나 노력이 든다면 사람들은 굳이 '최선'을 선택하기보다 '충분히 좋은' 선택을 받아들인다.
"(사용자를) 생각하게 하지 마!" -스티브 크룩
생각하는 것 자체만으로 정신적 에너지가 필요함 - 분명한 옵션 한두 개만 인터페이스가 곧바로 보여준다면 ?
4. 중도에 바꾸기 (Changing in Midstream)
하다가 중간에 마음이 바뀌었어.
어떤 경우든 간에, 설계한 인터페이스를 사용하는 동안 사용자의 목표는 바뀌기 마련이다.
선택 가능성을 열어 둬라.
- 사용자가 마음을 바꿀 수 있는 기회를 제공해야 한다.
- 이유 없이 사용자가 다른 페이지나 기능에 접근하지 못하도록 선택권을 박탈하지 마라.
5. 선택 미루기 (Deferred Choices)
지금은 응답하고 싶지 않아. 일단 이걸 완료하게 해줘.
"나중에 하기"로 선택을 미루게 도와주기
태스크에 집중한 사람에게 중간에 불필요한 질문을 던지면, 사용자는 질문을 건너뛰고 나중에 답하고 싶어 한다.
꼭 필요한 항목만 작성하게 하고, 나머지는 넘길 수 있게 하자
<인터페이스 디자인에서의 Tip> - 처음부터 사용자에게 너무 많은 선택지를 제시해서 겁먹게 하지 마라 - 필수 항목과 선택 항목을 분명히 구분하라. 필수 항목을 지나치게 많이 지정하지 말라. 선택 항목을 작성하지 않아도 넘어갈 수 있게 해라. - 질문과 선택지에서 중요한 것과 덜 중요한 것을 분리할 수도 있다. 간략한 리스트를 노출하고, 긴 리스트는 숨겨라. - 적절한 기본값 패턴을 사용해, 합리적인 기본값에서 시작하게 해라. - 사용자들이 비워 둔 입력란으로 다시 돌아올 수 있도록 눈에 띄는 곳에서 접근할 수 있게 하라. (ex. 장바구니에 담아 놓고 구매하지 않은 물건 목록 안내) 웹사이트를 둘러보고 이후 회원가입을 하도록 요청하면 성공 가능성이 높을 것이다.
6. 점진적 창조 (Incremental Construction)
이 코드 좀 바꿀래. 약간 이상해 보이는데, 다시 바꿀게. 이제 괜찮군!
사용자가 작은 부분부터 쉽게 만들수 있고, 인터페이스에서 수정사항을 빠르게 인식하고 저장할 수 있어야 한다.
작업하는 동안 전체 결과물이 어떻게 보이고, 바뀌고 있는지 계속 보여줘라
7. 습관화 (Habituation)
다른 곳에서는 다 작동하는 제스처가 여기서는 왜 안 돼?
인터페이스를 반복해 쓰다보면, 무의식 중에 특정한 물리적 행동을 하게 된다.
제스처를 취했을 때 예상되는 액션이 일관적으로 실행된다는 것을 확인시켜 줘라.
예를 들어, 이런 기본적인 단축키! ( + 이제 기본 브라우저에서는 해당 단축키가 디폴트로 작동한다고 한다.)
- 습관이 된 제스처가 작동이 안되는 상황에서 사용자가 이를 시도하거나, 최악의 경우에는 제스처로 작업물이 망가지면, 사용자는 난처해진다. - 갑자기 툴에 대하여 다시 생각해야 함 사용자는 분명히 실수할 것이고 경험이 많고, 습관이 많이 쌓였을 수록, 실수를 할 가능성이 높다. - 특히, 모바일 기기 제스처 기반 인터페이스를 개발 중이라면, 습관화를 섬세하게 고려해야 함
8. 짬시간 활용 (Microbreaks)
지금 지하철을 기다리고 있어. 2분동안 쓸모 있는 일을 하고 싶어.
접근하기 쉽고, 빠른 활동을 제공하며, 단순해야 한다.
그리고 복잡한 설치를 요구해선 안되고, 로딩이 한참 걸리면 안된다.
매번 로그인 할 필요도 없어야 한다.
<짧게 쉴 때 하는 일반적인 활동> - 이메일 확인 - 페이스북이나 트위터같은 스트림과 피드 읽기 - 뉴스 읽기 - 짧은 비디오 시청
스트림/피드 서비스
스트림/피드 서비스 : 가능한 빨리 최신 콘텐츠를 사용자가 보는 첫 화면에 띄워라.
게임, 비디오 전자책과 같은 서비스
게임, 비디오 전자책과 같은 서비스 : 사용자가 종료하기 전 마지막 시점을 기억해서, 별도의 확인 없이 앱이나 웹사이트를 그 시점으로 복구해야 한다.
사용자가 정리를 해야만 관리가 되는 소프트웨어 (ex. 이메일 앱)
사용자가 정리를 해야만 관리가 되는 소프트웨어 (ex. 이메일 앱) : 항목을 효율적으로 분류할 수 있는 방법을 제시하라. (리스트 상의 메시지 내용과 발신자 / 관심항목 표시 / 짧은 답장 / 빠른 업데이트 속도 ..)
9. 공간 기억 (Spatial Memory)
분명 그 버튼이 1분 적에는 여기 있었는데, 어디 갔지?
혹시 당신의 바탕화면 인가요?
마치 내 방 책상이 어지럽더라도 나는 어떤 물건이 어디에 위치한 지 아는 것 처럼...
사용자들은 자기만의 범주가 있다. 예를 들어, 바탕화면에서 원하는 것을 찾을 때 공간 기억을 효과적으로 사용한다.
이름이 아니라 위치로 기억한다는 것이다.
그러나 누군가 임의로 이 위치를 변경한다면? 사용자의 요청없이 시스템이 파일을 재정렬 한다면?
사용자는 오히려 멘붕에 빠질 것이다.
사람들은 공간을 기반으로 기억하기 때문에, 스스로 문서와 파일을 정리할 공간을 제공하는 게 좋다.
습관화 : 사람들은 유사한 기능은 비슷한 위치에 있을 것이라고 예상한다.
다이얼로그의 '취소', ' 확인', '닫기' 버튼 : 예상하는 위치에 둔다.
UI에서도 마찬가지 이다. 이미 익숙한 컨트롤의 위치를 바꾸면, 사용자의 공간 기억 능력을 저해하고, 사용자가 원하는 기능을 찾기 더 어렵게 된다.
10. 미래 계획 기억 (Prospective Memory)
일단 여기에 메모해 두고 나중에 처리하려고.나중에 볼 거니까 ... 지우지..므르. ....
미래 계획 기억 : 미래에 계획을 세우는 것. 불완전한 기억을 보완하기 위해, 각자의 방식으로 흔적을 남겨 미래에 할 일을 기억함
거의 모든 사람들은 복잡하고 바쁘고 멀티태스킹을 하면서 기억을 보조해 주는 장치를 마련한다.
