Visual을 위한 웹 UI 디자인
시각적 일관성의 원리
번역) UX Pin의 허락을 받고 기재하는 포스팅입니다
Introduction
사람에게 시각은 가장 강한 감각이기 때문에, 디자인은 그에 걸맞는 논리와 질서를 반영해야합니다.
시각적으로 표준화된 디자인(일관성이라 하겠습니다)은 당신의 인터페이스를 사용하기 쉽게 만들것이고 그렇지 않다면 사용자들이 사용하기에 어려울 것입니다. 페이지마다 다른 디자인은 혼란스럽겠죠.
일관성은 획일화를 말하는 것이 아닙니다. 디자인은 템플릿 복붙이 아니죠.
언제 일관성을 따르는게 가장 좋은지, 언제 그 규칙을 깰지 알 필요가 있습니다.
사용성의 친숙함과 독창성의 균형은 디자인 설계에 있어서 가장 어려운 결정이죠.
최고의 창의적인 판단을 내릴 수 있도록 우리는 Squarespace, Redhat, Jukely, Wunderlist 등의 시각적 일관성 사례에 대해 분석했습니다. 또한 사용성 리서치, 독창적인 사용성을 위한 유도성과 UI patterns 를 적용하는 것, 시각적 일관성의 중요한 영역에 대해 연구했습니다.
이 이야기가 유용하다고 생각 되어지면, 누구에게든 공유해 주십시오.
- Jerry Cao co-written by Kamil Zieba, Krzysztof Stryjewski, and Matt Ellis
디자인 작업을 하기 전에 찾아야 할 사용자 기대치
정보화 시대의 예술가로서 디자이너는 창조적인 자유를 누리고 있습니다. "일관성"과 "패턴을 따르는 것"과 같은 개념은 이러한 자유를 제한하는 것은 아니지만, 창조적인 것 이전에 사용자들이 서비스를 친숙하게 느낄 수 있도록 해줍니다.
Source: “Design Patterns vs. Users’ Expectations...” visualpun.ch. Creative Commons.
독창성은 감정적인 디자인으로 뛰어넘는데 도움이되지만, 디자인이 사용자의 기대대로 작동하지 않는 한 모두 의미가 없습니다.
이 챕터에서는 일관성, 사용성 테스트에서 사용자가 생각하는 것을 보여줄 수있는 방법, 패턴 및 명확한 레이블을 사용하여 사용자에게 만족감을 줄 수있는 방법에 대한 사용자 기대치에 접근하는 방법에 대해 설명합니다.
왜 일관성을 제일 먼저 생각해야 할까요?
왜 목업 제작 전에 사용자의 기대치 및 일관성에 대해 생각하는 것이 그토록 중요할까요?
그렇지 않으면 당신이 편견을 갖게 될 수 있기 때문이죠.
당신이 스스로에게 '사용자들은 무엇을 기대할까'라고 물어볼 때까지 이미 인터페이스를 상상했다면, 실수를 고치기가 더욱 힘들겁니다. 그 시점에서 이미 시각적 디자인 패턴에 대한 대략적인 아이디어를 갖게 될 것이므로 새로운 관점에서 바라보는 게 더더욱 힘들겁니다. 새로운 사용자가 디자인과 처음 만났을때 생각할 수있는 것에 그다지 신경쓰지 않는것이죠.
사용자와 공감대를 형성하는 것은 인터렉션 디자인의 핵심이며, 기존 설계가 여전히 공식화되는 것보다 더 어려운 작업입니다. 물론, 사용자 기대에 근거해 UI를 수정하고 행동패턴을 추적할 수 있겠죠. 그렇다고 해도 나중에 수정하는 것이 덜 어렵도록 사전에 생각 하는 것이 더 낫습니다.
Source: “Listening (the extended research dept)” Xavier Vergés. Creative Commons.
사용자의 기대치와 일관성을 고려해야 할 시점은 작업의 가장 초반 단계입니다. 그 당시에는 사용자의 사고 방식과 가장 가깝습니다. 설계가 새로운 것이죠.
이것은 외부 및 내부 일관성에 모두 적용됩니다. 사용자 경험은 이전 경험에서 이어지므로 새 디자인조차도 표준 규칙 (외부 일관성)을 따라야합니다. 그러나 사용자가 사이트 또는 앱을 사용할 때 새로운 기대치를 개발하기 때문에 내부 페이지를 서로 일관되게 유지해야합니다.
직감도 한 방법일 수 있지만, 단단한 증거에 의해 디자인 하는 것이 최고겠죠.
Testing Before Design
유용성 테스트는 사용자의 기대치를 이해하는 것과 디자인 가설을 입증하는데 도움이 됩니다.
디자인의 일관성을 보장하기 위해, 디자인 프로세스 이전과 중간에 유용성 테스트 진행하는 것을 추천합니다.
pre-design 테스트로 카드 정렬 / 사용자 인터뷰 / 경험적 평가 이렇게 3가지가 있습니다.
1. 카드 정렬 (Card Sorting)
사용자 인터렉션에 있어서 네비게이션은 중요하므로, 사용자들이 정보를 자연스럽게 느끼도록 정보를 조직화 하고자 할 것입니다. 그런 점에서 카드 정렬 방식은 자연스럽게 정보를 조직화하는데 도움이 됩니다.
Source: ConceptCodify
카드 정렬에는 두가지 방법이 있습니다.
Open Sorting: 사용자들에게 레이블들을 제공하고 그들을 그룹별로 묶도록 합니다. 묶고 나면 각 그룹에 네이밍을 붙이도록 합니다. 이것은 사용자들의 자연스러운 생각 패턴 쪽으로 이끌기 때문에 새로운 아이디어를 만들때 추천합니다.
Closed Sorting: 마찬가지로 레이블들을 제공하지만, 이미 존재하는 그룹에 카테고리로 분류하도록 합니다. 이것은 웹사이트 리뉴얼 시에 추천합니다.
2. 사용자 인터뷰
사용자 인터뷰는 원하는만큼 정교하거나 비용적인 측면에서 효과적일 수 있습니다.
UX pin을 종이노트에서 클라우드 디자인 앱으로 번역하기 이전에 우리는 50여명의 디자이너들에게 인터뷰를 했습니다. 왜냐면 디자인 시장은 포화 된 공간이기 때문에 가능한 한 많은 디자이너와 대화하여 좋은 디자인 도구를 통해 워크 플로, 프로세스, 영감 및 기대 사항을 배울 수 있기 때문입니다.
UXPin을 디자인할때, 사용자가 다른 툴에서 쌓은 기대치에 우리의 작업물이 부합하는지 인터뷰를 통해 확인했습니다.
예를 들어, 각각 다른 기대사항을 만족시키기 위해, 프로젝트 레이아웃은 그리드로 할지 리스트로 할지 사용자들의 선택에 따랐습니다. 디자이너들마다 다르게 사용해온 Trello, Asana 또는 프로젝트 관리를위한 다른 툴을 사용하는지 여부에 따라 다양한 기본 설정을 갖는 것이죠.
Source: UXPin
실제 인터뷰를 진행했을때, "무한 스크롤이 좋으세요 탭이 좋으세요?"처럼 특정한 디자인 질문을 해서는 안됩니다. 사용자들의 습관, 행동, 필요를 더 깊게 질문하려면 선택지를 제시하지 마세요.
블로그 CMS디자인을 한다고 가정해봅시다.
"현재 블로그 CMS에서 어떤 점이 좋나요?"와 같이 묻는다면, "글쓰기에 집중할 수 있는 워드프레스의 distraction free가 좋다" 고 사용자들이 말하는 것을 들을 수 있겠죠.
그렇다면 블로그 CMS를 디자인 할 때, 인터페이스의 모양을 전환하는 옵션을 사용자에게 제공해야한다는 것을 유추 할 수 있습니다.
사용자 인터뷰를 위해 고려해야할 많은 전략들이 있지만 여기서 다루지는 않을거에요. 아래의 링크로 가시면 자세히 보실 수 있습니다.
User Interview Techniques, Liz Danzico
Ask and Ask Again: Critical Interviewing Is an Essential Component of Usability Testing, Kate Lawrence
Getting Better Data from User Studies, Michael Margolis
몇가지 적은 비용으로도 사용자 조사에 이를 수 있습니다. Patrick Neeman의 Creating lightweight personas 를 읽어보세요. 그가 열거 한 모든 전술은 사용자의 기대를 추론하는 데 필요한 통찰력을 발견하는 데 도움이됩니다.
3. 경험적 평가
경험적 평가는 경쟁자 디자인에 초점을 맞추기 때문에 외부 일관성을 보장하는 데 효과적입니다. 전통적으로 경험적 평가는 사용성 문제 또는 감사 기능을 테스트하는 데 사용되지만 디자인을 시작하기 전에 현재 시장 상황을 개략적으로 설명 할 수 있습니다.
1. 어떤 분야를 평가할 것인지 결정하기
어떤 분야에서 타사와 경쟁 할 수 있는지, 혹은 어떤 분야에서 타사보다 더 뛰어난가요?
이는 사용의 용이성, 사용자 목표 충족 방법, 시각적 스타일 및 분위기, 대상 사용자 자체 일 수 있습니다.
비평을 위해 다음 영역을 포함할 수 있습니다.
• 시각적 hierarchy
• 시각적 impact
• 시스템 피드백의 효과
• Clarity of copy
• 탐색 용이성
• 사용자 입력의 단순성
2. 위 기준에 따라 평가를 실시하세요.
인력을 확보 할 수 있다면 5 명이 타사의 인터페이스를 평가하고 위 목록에있는 필드에 점수를 할당하도록하십시오. 이것이 불가능한 경우 간단한 설문지를 작성하거나 최후의 수단으로 경쟁 업체 사이트를 직접 방문하여 평가를 할 수 있습니다.
3. 결과를 도표화 하세요.
평가 결과를 이해하는 가장 분명한 방법은 평가를 보는 것입니다. 데이터를 그래프로 구성하는 것이 데이터를 구성하는 가장 효율적인 방법입니다. Michael Hawley는 Spider Web을 매우 효율적으로 사용합니다. 비교하기에 좋아서 추천합니다.
4. 일관성과 불일치에 대한 결과를 비교하십시오.
경쟁사의 점수를 옆에 두고 비교하거나 오버랩핑해서 본다면 사용자가 기대하는 것을 확실하게 이해할 수 있습니다.
예를 들어, 경쟁자 중 누구도 광고를 사용하지 않는다고 가정 해 보겠습니다. 사이트의 외부 일관성 및 기능을 광고가 해칠 경우 사용자를 짜증나게 할 수 있습니다. 사용자들은 사이트나 앱을 사용할 때 광고가 없길 기대하며, 이러한 기대치를 충족시키지 않으면 사이트에 대한 경험을 악화시키게 될 것입니다.
다른 한편, A사이트에서는 주어진 작업을 완료하는 데 한 가지 방법만을 제공한다고 가정 해 봅시다. 그러나 이 일관성을 깨고 B사이트에서 주어진 작업을 완료하는 데 여러 가지 방법을 제공하는 경우, 일부 사용자에게 깊은 인상을 심어줄 수 있습니다.
이러한 방식으로 경험적 검토 비교는 단순히 사용자의 기대에 부응하지 않고 이를 능가하는 경쟁사를 능가하는 가능성을 보여줍니다.
끝으로 ㅡ
일관성은 사이트 디자인을 끝낼때 추가하는 것이 아니라, 기초 공사를 시작할 때 구축해야합니다.
일관성은 항상 사용자 기대에 묶여있을 것이고 모든 디자인의 중심이겠죠.
사용성 테스트는 사용자가 가장 원하는 일관성의 유형을 정확히 찾아내는 데 도움이 될 수 있습니다. 경쟁 범위를 넓히고 사용자의 의견을 듣고 조기에 자주 테스트하십시오.
