brunch

You can make anything
by writing

C.S.Lewis

by 포동포동 Feb 17. 2021

9편. 사용성 테스트

UX 디자인 입문

오늘은 앞에서 배웠던 것들을 다시 한번 복습하는 시간과 새로운 몇 가지를 간단하게 공부했습니다. 이제 UI와 시각디자인이 남았어요. 얼른 마무리하고 프로젝트로 적고 싶고 하고 싶은 건 많은데, 게을러지지 않게 노력해야겠어요.

01. 사용성 테스트

사용성이라는 것은 사용자가 제품이나 서비스를 사용할 때 얼마나 사용하기 쉬운가를 뜻하는데, 사용자와 서비스 제품 간에 일어나는 인터렉션에서 일어나는 사용의 품질을 의미합니다. 이러한 사용성을 닐슨은 아래의 그림과 같이 5개로 구분합니다.

그렇다면 왜 사용성이 중요하고 우리들은 사용성을 고려해야 할까요? 요즘은 사용자들이 IT에 점점 익숙해지면서 많은 기술과 다양한 영역에 활동을 넓혀갑니다. 그렇게 되면서 사용자들의 기술적 인내심을 줄어들게 되었죠. 그렇기 때문에 웹사이트나 어플리케이션에 랜딩 하거나 다운로드하는 것은 귀찮은 과정이고, 누군가에게는 어렵지만 이를 지우는 것, 삭제하는 것은 순식간에 일어나기 쉽습니다. 실제 조사에서 친절한 UI 디자인의 경우 67%가 구매를, 불친절한 UI 디자인의 경우 61%가 이탈을 했다고 할 정도니까요.

우리의 서비스와 어플리케이션 등이 사용자들로부터 지워지지 않기 위해

또한 리소스적인 측면도 있습니다. 론칭에 가까워질수록 디자인을 바꾸기 어려워지고, 리소스도 더 많이 들게 되죠. 사용자들의 피드백을 빠르게 받을수록 디자인을 수정하기 위한 리소스를 조금 덜 투입할 수 있습니다. 초반에 한 번이라도 정확한 테스트를 진행하는 것이 효율적이라고 하는 것이 바로 이러한 이유 때문이죠. 이 부분을 더블 다이아몬드에서 분류하자면 리서치에 해당됩니다.

사용자 테스트의 이점은 프로젝트 초기에 문제점을 발견하고 수정하는 데 도움을 준다는 것입니다. 이를 통해 디자인 개발 프로세스에서 리소스를 효율적으로 사용할 수 있으며 사용자들의 니즈와 행동 패턴을 반영할 수 있죠. 또 이해관계자와 팀 구성원들을 설득할 수 있습니다. 이러한 사용성 테스트는 크게 5개의 순서로 구성되어있습니다.

출처 : Fastcampus - UX/UI Design 입문 과정

1. 테스트 목표 세우기

: 테스트를 진행하는 목표는 무엇인가? 누구를 대상으로 진행할 것인가? 테스트에 참여한 사용자에게 어떤 식으로 서비스를 설명할 것이고 어떤 테스트를 통해 무엇을 관찰하는지를 명확하게 할 것인지를 정해야 합니다.

출처 : Fastcampus - UX/UI Design 입문 과정

2. 테스트 설계하기

: 검증하고자 하는 중요한 메인 테스크 3~5개를 선정하고 과제의 우선순위를 세우는데, 이때 시간은 보통 15분 ~ 30분 정도 최대 1시간을 넘지 않도록 해야 합니다. 일찍 끝날 경우를 대비해서 여분을 준비하고 각 시나리오를 작성합시다! 예를 들면 "출발지 - 도착지 설정 후, 택시 호출" 등의 시나리오를 말하는데, 시나리오는 이해관계자, 내부인을 통해 보완할 수 있습니다.

3. 리쿠르팅 - 대상자 모집

: 우리가 설정한 페르소나와 가까운 사용자를 모집해야 결과가 정확하고 그렇게 해야만 서비스를 만든 우리들의 의도가 맞는지 아닌지 판단할 수 있습니다. 모집된 참여자들이 테스트 목적에 부합하는지를 확인하고 지급 보상을 산정하는데 일반적으로 3 ~ 5만 원 최대 10만 원을 정합니다.

: 이때 대상자는 과연 몇 명이 적당할까요? 100%를 채우기보다는 시간적으로도, 효율적인 면에서도 5명으로 진행한 다음 보완하고 다시 5명으로 진행하는 것이 낫습니다. 처음부터 10명으로 진행하는 것보다는 5명을 통해 알아낸 문제점을 개선 후 다시 테스팅하는 것이 인사이트가 더 많다고 할 수 있죠.

출처 : Fastcampus - UX/UI Design 입문 과정

4. 테스트 진행하기

: 이때 사용자가 어떻게 해야 해요? 와 같은 질문을 할 때 바로 대답을 해주거나 해결책을 제시해주면 테스트 결괏값이 달라질 수 있기 때문에, 어떻게 해야 할 것 같으신가요? 와 그 버튼을 누르면 어떤 결괏값을 기대하나요? 와 같은 행동을 유도하고 결과값을 예상할 수 있도록 유도하여야 합니다.

: 여기서 팁은 "Think out loud"를 사용하는 것입니다. 이는 사용자들이 보는 화면과 테스크의 순서, 어떤 행동을 했을 때 기대하는 결과값 등 머릿속에 떠오르는 생각을 계속 말하도록 유도하는 것이고 이러한 방법은 테스트를 진행하는 데 있어 많은 인사이트를 가져올 수 있죠. 사용자의 말뿐만 아니라, 특정 화면에서 오래 머무는 경우, 실수나 잘못 이해하는 부분 등 비언어적인 것 들고 관찰하여 기록하는 것이 좋습니다.

출처 : Fastcampus - UX/UI Design 입문 과정

5. 결과 분석 및 정리

: 시간과 정성, 비용이 많이 들어가지만 그만큼 사용자들의 문제와 니즈를 파악할 수 있게 도와주는 방법입니다.

02. 제이콥 닐슨의 10가지 휴리스틱 평가

휴리스틱의 그리스 어원은 찾아내다, 발견하다는 뜻입니다. 이것은 경험에 기반하여 문제를 해결하거나 학습 또는 발견하는 방법으로 과학적 수학적 분석이 아닌 직관과 경험을 활용하여 부족한 시간이나 정보로 인해 합리적 판단이 안될 경우, 판단 내리기에 빠르게 사용할 수 있는 기준이죠. 짧게 줄이자면 휴리스틱은 아래와 같이 정의할 수 있습니다.

경험에 기반하여 문제를 해결하거나, 학습 또는 발견하는 것.

UX에서는 사용자 인터페이스, 디자인 사용성을 전문가들이 만든 기준에 따라 평가하는 것을 의미하고 복잡한 데이터 분석보다 간단하고 사용성 테스트보다 시간이 짧게 걸리기 때문에 사용하고 있습니다. 이때 휴리스틱은 어떠한 기준으로 향상할지에 대한 기준을 잡기에 도움을 주는 것입니다. 하지만 주관적 기준이 반영되기 때문에 UX 전문가의 지식정도와 경험 폭에 따라 결과가 달라지고 사용자의 시각과는 달라질 수 있다는 것이 주의할 점입니다. 아래의 그림은 휴리스틱 평가를 보여줍니다.

출처 : https://uxdesign.cc/10-usability-heuristics-every-designer-should-know-129b9779ac53

01. Vivibility of System Status - 시스템의 현재 상태를 시각화하여 보여주기

: 사용자들은 서비스나 제품에서 자신의 위치나 시스템의 현재 상태를 인지하지 못하면 불편함과 혼란을 느낍니다. 예를 들어 카카오 T앱을 사용하여 택시를 부를 때 자신과의 거리과 택시의 거리를 확인하고 언제 도착할 수 있는지에 대한 정보를 확인할 수 있는데, 이때 호출되었다는 메시지만 받는다면 사용자들은 불편함을 느낄 수 있죠. 이 때문에 상황에 대한 정보를 지속적으로 업데이트시켜주어야 할 필요가 있습니다.

02. Match Between System & Real World - 현실 세계와 부합되는 시스템

: 제품을 서비스하고 디자인할 때 많이 하는 실수는 사용자들에게는 일상적이지 않은 단어의 사용이나 서비스의 흐름을 구성하는 것입니다. 제품과 서비스는 사용자를 타겟으로 하기 때문에 워딩의 톤 앤 매너, 디자인, 서비스 구성 요소는 평소에 사용하는 것들과 부합해야 하죠. 에러 메시지의 경우 프록시 서버 등 개발자가 아니면 알아들을 수 없는 단어를 쓰지 않고, 구석구석 찾았지만 없다고 친숙하게 설명하는 것이 예시일 수 있습니다.

03. User Control and Freedom - 사용자에게 적절한 통제권을 부여.

: 사용자에게 서비스 컨트롤하는 통제권을 주는 것이 중요합니다. 상사에게 잘못 보낸 경우 취소가 안된다면 불편하기 때문이죠.

04. Consistency and Standards - 일관성과 표준성 유지

: 서비스에서 디자인과 워딩의 톤 앤 매너를 일관성 있게 유지하는 것이 중요합니다. 룩엔필이 페이지마다 다르다면 서비스에 대한 혼란을 야기시킬 수 있죠. 구글, 애플의 가이드라인 등으로 일관적이게 유지되는 경험을 제공해주는데, 일관성 있는 UI에서 사용자들의 특정된 테스크를 수행하기 수월하다고 합니다.

05. Error Prevention - 에러를 사전에 방지하는 디자인

: 사용자의 실수를 미연에 방지하는 디자인이다. 에러 메시지는 사용자에게 부정적인 경험을 제공한다. 이때 당연히 실수를 하기 때문에 그전에 디자이너가 에러를 사전에 예방할 수 있다면 더 좋은 경험을 제공할 수 있다.

06. Recognition Rather Than Recall - 기억해내기보다 인지할 수 있도록

: 사용자들은 서비스를 사용하면서 입력한 정보를 사용한 내역을 기억하려고 하지 않습니다. 이런 상황에서 사용자에게 정보를 하나씩 전부 요구하는 것은 말이 안 되는 것이죠. 서비스와 제품은 최대한 사용자가 사용하기에 필요한 정보를 그때그때 상황정보를 활용해 작업 단계를 수행할 수 있도록 배려해야 합니다.

07. Flexibility and Efficiency of Use - 유연하고 효율적인 사용

: 시스템을 설계할 때 서비스와 제품을 처음 접근하는 비기너 유저와 파워 유저를 구분해야 합니다. 처음에는 익숙하지 않지만 점차 서비스에 적응하고 효율적이고 빠르게 사용하는 방법을 찾게 됩니다. 이를 위해 서비스와 제품은 유연함과 효율을 중시해야 하는데, 디자인 툴은 단축키를, 로그인에는 옵션을 다양화하게 하는 등의 방법이 있습니다.

08. Aesthetic and Minimalististic Design - 심미적이고 미니멀한 디자인

: 우리가 사용성에 대해 배우고, 편리하고 페인 포인트를 개선하는 것에 치중했지만, 미적인 아름다움을 무시할 수 없다. 특히 심플하고 간결한 디자인은 정보의 가독성을 올리고 접근성을 올려준다. https://www.warbyparker.com/eyeglasses 는 이를 참고하기 좋은 사이트입니다!

09. Help User with Errors - 에러 발생 시 사용자 스스로 문제를 파악하고 수정할 수 있도록

: 사용자들은 제품과 서비스를 사용하면서 에러와 실패 케이스를 경험했을 때 사용하기 어렵다고 느낍니다. 특히 회원가입이나 결제의 경우 복잡하면 더 그렇죠. 사용자의 입장에서 에러는 발생할 수 있지만, 5번에서 처럼 미연에 방지하는 장치를 심어두어도 발생하는 것이 에러입니다. 하지만 에러가 발생했을 때 도와줄 수 있는 장치 또한 필요하죠. 무엇에 실패했는지 다음 스텝을 밟기 위해선 어떤 정보가 필요한지 등을 알려주는 것은 스스로 문제를 파악하고 수정하는 것에 도움을 줄 것입니다.

10. Help and Documentaion - 사용자에게 충분한 도움말을

: 잘 만들어진 서비스라면 특별한 튜토리얼이나 도움말 없이도 사용자가 직관적으로 제품과 서비스의 흐름을 읽을 수 있어야 하지만, 어려움을 겪거나 궁금증이 생긴다면 해결하기 위한 다큐먼트가 있어야 합니다. 이건 접근성이 쉽고 정보를 받아들이기 어려움이 없어야 하죠. 사용성 테스트만큼의 효과는 없으나 짧은 시간에 사용성을 관찰하기에 유용할 수 있습니다. 경험이 많은 전문가에게는 비용이 많이 들겠지만 경쟁사 분석에 도입해보면 디자인의 방향성을 잡는데 인사이트를 얻을 수 있기도 합니다.

03. 정량적 리서치 - Quantitative Research

출처 : https://www.mobiinside.co.kr/2019/06/04/big-data/

몇 년 전부터 데이터 드리븐이 유행이고 그러한 유행이 UX라고 아닐 리 없죠. 이미 유행 중입니다. ~~저도 나중에 별도로 강의를 들을 예정인데, 언제가 될진 모르겠습니다.~~ 어쨌든 그만큼 정량적 데이터를 기반으로 의사결정을 내리는 기업이 늘어나고, 이러한 데이터를 기반으로 디자인하는 방식을 우선하고 있다는 것은 사실이죠. 간단하게 이야기하면 사용자의 행동을 구체적인 숫자, 그리고 큰 단위의 사용자 행동 데이터를 수집하고 분석하는 것을 말합니다.

데이터 드리븐의 장점은 넓고 큰 범위의 사용자들을 대상으로 실험하므로 수집하고, 분석하기 때문에 이러한 자료는 디자인을 하는 데에 있어서 회사나 서비스, 제품의 방향성을 설정할 때 객관적인 지표로 설득력을 가진다는 것입니다. 추측보다는 실제적인 데이터를 가지기 때문에 의사결정에 논리적일 수밖에 없다는 것인데, 우리가 정성적 리서치, 사용자 인터뷰 등을 통해 발견된 인사이트를 통해 발견된 가설을 데이터를 통해 검증할 수 있다는 것입니다. 즉, 정성적과 정량적 조사가 상호보완을 할 수 있다는 것입니다.

빠른 개발 주기를 가지고 성공, 실패를 통해 개선할 수 있으며, 디자이너들의 공통된 고민인 '개발 공부를 해야 하나?'라는 생각이 이러한 데이터를 모아주는 도구가 늘어남에 따라 조금씩 방향이 바뀌고 있습니다. 이러한 방법론에는 다양한 것들이 있는데 앞에서 배워 이미 익숙한 것들이 입문에서 적당할 것 같습니다. 바로 A/B 테스팅과 EYE 트레킹입니다.

출처 : https://knowledgemarble.tistory.com/84

1. A/B Testing

두 가지 시안을 론칭해보고 어떤 디자인 안이 전환율이 높은지 , 이탈률이 낮은 지를 측정하고 성과를 파악해나가는 방법입니다. 빨리 내보내고 검증을 해보는 것이 이 방법론의 주안점으로, A와 B 중 어떤 것이 나은가? B가 믿을만한 정도인가? 와 간단한 것들을 확인할 수 있습니다. 의사결정에 도움을 주는데 보통 2개 이상의 안을 선택하기 위해 사용하며 페이지의 큰 변화를 주로 테스팅하며 페이지에 요소를 제거하거나 더해야 하는 경우에 효과적이죠.

결과값을 신속하게 진행하고 프로젝트에 대한 힘을 실어줄 수 있습니다. 유저분을 반반으로 나누어서 테스팅하며, 3개 이상의 경우 더 상세하게 쪼갤 수 있습니다만 리소스적인 입장에서는 개발과 디자인에서 리소스가 많이 들어가며 타임라인이 빡빡하므로 무턱대고 이것을 진행하자고 하면 안 되고, 확실히 검증할 것이 있고 목적이 분명할 때 해야 합니다. 글로벌 앱은 나라별로 다르게 하거나, 5 ~ 10% 정도의 유저에만 오픈해보고 행동 패턴 및 반응을 확인해서 반영할 수 있습니다.

2. EYE 트래킹

이 방법론은 발명된 지 100년이 되었으니 사람의 시선을 탐구하게 된 것은 오래전부터 있었던 일이라고 할 수 있습니다. 수천만 원을 호가하는 고가의 장비로 전문적인 컨설팅과 리서치 기관에서 쓰고 있지만, 저렴하게 10만 원까지의 제품이 출시되면서 여러 방면에서 활용하고 있습니다. 사용자의 시선을 따라 흐름을 파악하고 사용자가 콘텐츠를 읽는 순서나 정보 배치에 대한 인사이트를 얻는 것이 기본이지만, 표현하는 방식은 다양합니다.

출처 : https://www.beusable.net/blog/?p=1497

1) 히트맵

: 사용자가 어디를 가장 많이 보는지를 색으로 구분합니다. 빨간색의 경우 시선이 많이 머무르고, 초록색부터 색이 흐릴수록 시선이 덜 간다는 것이죠. 대부분의 웹사이트는 F형태로 내려갑니다. 이러한 사용자가 읽는 순서에 대한 연구는 닐슨 노먼의 연구에 의해 발표되었습니다.