사용자 경험 디자인에 대한 종합 가이드

게시 됨: 2022-03-10

빠른 요약 ↬ 디자이너는 모든 것이 매핑될 때까지 세부 사항에서 길을 잃는 경향이 있습니다. 디자인 프로세스는 반복적이므로 권장하지 않습니다. 이 가이드는 계속 진행하는 데 도움이 될 것입니다.

( 이 기사는 후원을 받은 기사 입니다.) 초기 사용자 연구를 수행하고 연구 결과를 분석한 후 설계 프로세스의 다음 단계는 가정을 테스트하기 위해 일련의 설계를 개발하여 학습한 내용을 적용하는 것입니다. Adobe XD 시리즈의 네 번째 기사에서는 디자인 프로세스의 초기 단계에 중점을 둘 것입니다.

10개의 기사로 구성된 이 전체 시리즈 내에서 디자인 프로세스를 함께 묶는 3개의 기사 중 첫 번째 기사입니다. 이 기사는 조감도에서 더 높은 수준의 UX 디자인을 다룹니다. 다음 기사에서는 UI 디자인, 인터페이스 인벤토리 탐색, 패턴 라이브러리 구축, 상호 작용 및 애니메이션 디자인을 살펴봅니다. 시리즈 중 이 시리즈의 세 번째 기사에서는 와이어프레이밍 및 프로토타입 제작에 대해 살펴봅니다.

UX 연구에 대한 이전 기사에서 살펴본 것처럼 사용자 연구를 기반으로 구축하고 있음을 강조하는 것이 중요합니다. 연구 결과를 분석한 결과, 설계 프로세스의 이 단계에서 우리의 목표는 다음과 같습니다.

사용자 스토리, 시나리오 및 스토리보드를 수용하여 다양한 사용자의 요구를 충족시키는 몇 가지 명확한 사용자 경로를 설정합니다.
HCI(인간 컴퓨터 상호 작용)의 세계에서 몇 가지 교훈을 적용하여 첫 번째 원칙을 염두에 두고 설계합니다. 그리고
데스크톱과 모바일 컨텍스트 모두에 적용할 수 있는 장치에 구애받지 않는 방식으로 디자인에 대한 '모양과 느낌'을 설정합니다.

요컨대, 이 기사는 연구 단계와 설계 단계 사이의 다리 역할을 하기 위한 것입니다. 지난 기사에서 강조했듯이 디자인 프로세스(연구, 디자인, 프로토타입, 빌드, 테스트)는 반복적입니다. 프로세스의 이 단계에서 우리는 프로토타입, 빌드 및 테스트할 수 있는 일련의 디자인을 개발하는 데 중점을 둡니다.

UX 디자인은 방대한 주제이므로 이 기사를 짧은 입문서로 생각하십시오. 그러나 이전 기사에서와 같이 귀하가 잘 다룰 수 있도록 몇 가지 제안된 읽을거리를 제공하겠습니다.

스켈레톤 제자리에 놓기

사용자 인터페이스(UI) 디자인과 인터랙티브 프로토타입 제작에 대한 세부 사항으로 들어가기 전에 높은 수준의 디자인 흐름을 제자리에 배치하고 디자인을 빌드할 수 있는 골격을 설정하는 것이 중요합니다.

프로세스의 이 시점에서 연구 결과를 사용하여 다양한 사용자의 목표를 식별하고 사용자 스토리의 개발을 알리는 것이 중요합니다 . 이러한 사용자 스토리를 사용하여 다양한 시나리오를 만들 수 있습니다. 이는 설계 프로세스를 안내하는 명확한 목표와 기본 의도를 식별하는 데 도움이 됩니다. 또한 우리가 구축하고 있는 것을 통해 흐름을 개발할 수 있습니다.

종이 프로토타입과 스토리보드를 사용하여 초기 흐름을 개발할 때 세부 사항을 드릴다운하기 전에 전체 디자인에 대한 느낌을 얻는 데 중점을 둡니다. 뼈대를 제자리에 놓고 세부 사항에서 길을 잃지 않는 것이 중요합니다.

이전 기사에서는 프로젝트의 디자인 단계에 착수하기 전에 사용자 조사를 수행하는 것의 중요성에 중점을 두었습니다. 내가 말했듯이 :

사용자와 시간을 보내며 그들의 요구 사항을 파악하고 사용자가 달성하려는 것이 무엇인지 파악하는 것이 '해야 할 일'입니다.

사용자의 '해야 할 작업'을 알려줌으로써 우리가 디자인하는 것이 진정으로 사용자 중심인지 확인할 수 있습니다. 집중적인 사용자 연구를 수행한 후에는 발견한 내용을 디자인 프로세스에 알리는 데 사용하는 것이 중요합니다. 당신의 연구는 당신이 디자인하고 있는 사용자들이 공통적으로 가지고 있어야 하는 몇 가지 패턴과 요구 사항을 설정하는 데 도움이 되었을 것입니다.

그러나 한 가지 크기가 모든 사람에게 맞는 경우는 거의 없으며 디자인하는 것이 무엇이든 서로 다른 요구 사항을 가진 여러 사용자 유형이 있을 수 있습니다. 다양한 사용자의 요구 사항을 나타내는 '사용자 스토리'를 개발하면 해결하려는 목표를 요약하고 나머지 프로세스를 형성하는 데 도움이 될 수 있습니다. 그러나 사용자 스토리는 정확히 무엇입니까?

사용자 스토리

사용자 스토리는 다양한 사용자의 '해야 할 작업'에 대한 상위 수준 보기를 설정하는 유용한 방법입니다. 일반 사용자의 관점에서 작성된 이 문서는 다양한 사용자가 가진 다양한 목표를 설정하는 데 도움이 되므로 그에 따라 다양한 요구 사항에 맞게 디자인 할 수 있습니다.

사용자 스토리라는 용어는 1998년 크라이슬러 프로젝트에서 "사용자 스토리는 대화를 위한 약속"이라는 문구를 만든 소프트웨어 개발의 애자일 운동의 창시자 중 한 명인 Alistair Cockburn에 의해 시작되었습니다.

사용자 스토리는 요구사항에 대해 작성하는 것에서 요구사항에 대해 말하는 것으로 강조점을 이동합니다. 미묘하지만 쓰기에서 말하기로의 이러한 전환은 디자인 프로세스에 상당한 영향을 미칠 수 있습니다.

너무 자주 요구 사항이 추상적인 방식으로 전달됩니다. 주의하지 않으면 사용자가 필요로 하는 것과 거의 유사하지 않고 '위원회에 의한 설계'가 필요로 하는 것과 더 유사한 것을 확인해야 합니다. 사용자 스토리는 대화의 중심에 사용자를 배치하는 데 도움이 됩니다.

사용자 스토리는 사용자를 디자인 프로세스의 중심에 배치함으로써 다양한 사용자의 요구를 정의하는 좋은 방법입니다. 사용자 스토리는 역할을 작업 및 목표에 매핑하는 데 도움이 됩니다.

대화를 장려하고 촉진하는 도구라는 이 아이디어는 사용자 스토리의 강점을 포착합니다. 사용자가 항상 설계 및 개발 프로세스의 중심에 있도록 하여 시나리오 매핑을 시작하는 데 이상적인 도구 입니다.

다양한 사용자의 관점에서 전달되는 목표 및 기능에 대한 간략한 설명, 사용자 스토리는 사용자의 관점에서 문제를 볼 수 있도록 사용자의 기본 목표를 이해하는 데 도움이 됩니다. 이들은 다음과 같은 패턴을 따릅니다.

(특정 역할을 맡은 사람) 으로서 ,
나는 (행동을 수행하거나 무언가를 찾으려고),
그래서 (나는 나의 목표를 달성할 수 있다).

위의 템플릿을 사용하여 다양한 사용자의 입장이 되어 다양한 스토리를 전개하여 디자인을 형성할 수 있습니다. 예를 들어, 강사와 학생이 학습 자료를 공유할 수 있는 웹 기반 학습 리소스를 구축한다고 상상해 보십시오. 우리는 다양한 요구를 가진 다양한 사용자를 보유하고 있을 것입니다. 강사의 사용자 스토리는 다음과 같습니다.

강사로서 강의 슬라이드를 공유하여 학생들이 강의실 이외의 리소스에 액세스할 수 있도록 하고 싶습니다.

이 사용자의 특정 요구에 대한 짧은 이야기를 개발함으로써 이러한 유형의 사용자를 만족시키는 디자인 패턴을 구상하기 시작할 수 있습니다. 요구 사항이 다른 사용자인 학생의 관점에서 볼 때 다음과 같은 사용자 스토리를 개발할 수 있습니다.

학생으로서 강의 슬라이드에 액세스하여 수정할 때 참조할 수 있도록 하고 싶습니다.

다양한 관점에서 전달되는 이러한 이야기는 설계 프로세스를 시작할 때 높은 수준에서 설계를 매핑하기 시작하는 데 사용할 수 있는 유용한 도발을 제공합니다. 중요한 것은 스토리가 사용자의 요구를 충족시키는 데 중점을 둡니다. 간단히 말해서 사용자 스토리는 높은 수준에서 사용자의 목표가 무엇인지 이해하는 데 도움이 됩니다. 그런 다음 이러한 스토리를 사용하여 디자인을 시작할 수 있는 다양한 시나리오를 개발할 수 있습니다.

시나리오를 사용하여 설계 정보 제공

프로젝트를 시작할 때 많은 기능을 추가하고 '특징염'에 빠지기 쉽습니다. 이 접근 방식의 위험은 사용자의 핵심 목표를 손상시키는 기능을 추가하기 시작하기 쉽다는 것입니다.

사용자 스토리를 사용하여 일반적인 시나리오를 개발하면 사용자의 핵심 목표에 계속 집중할 수 있습니다. 또한 이 접근 방식을 통해 프로젝트 시작 시 명확한 결과물과 범위를 설정 하는 데 사용할 수 있는 일반적인 사용자 요구 사항에 대한 기대치를 설정하고 벤치마크를 개발할 수 있습니다.

사용자 스토리로 시작하여 다양한 사용자의 요구를 충족시키는 다양한 시나리오를 구축할 수 있습니다. 이러한 스토리와 구축 흐름을 매핑하면 다양한 사용자의 요구 사항을 수용하는 방법을 설정할 수 있습니다. — 사용자 스토리로 시작하여 다양한 사용자의 요구를 충족시키는 다양한 시나리오를 구축할 수 있습니다. 이러한 스토리를 매핑하고 흐름을 구축하면 다양한 사용자의 요구 사항을 수용하는 방법을 설정할 수 있습니다.

이전 예제로 돌아가서 다양한 사용자의 관점에서 몇 가지 상위 수준 목표를 설정할 수 있습니다. 강사의 경우 업로드 기능을 설계해야 합니다. 학생을 위해 액세스 기능을 설계해야 합니다. 이는 높은 수준의 목표이지만 시나리오를 개발하면서 사용자 스토리에 세부 사항과 복잡성을 추가하여 디자인에 더 많은 정보를 제공할 수 있습니다.

예를 들어, 이전 예제로 돌아가서 학생들의 관점에서 다음 시나리오를 고려할 수 있습니다.

기본 수준에서 학생들은 슬라이드에 액세스하기를 원합니다.
약간 더 향상된 수준에서 학생들은 슬라이드에 주석을 달고 메모를 캡처할 수 있기를 원할 수 있습니다.
마지막으로, 자원이 허용하는 경우 학생들은 동료와 메모를 공유하여 협업 학습을 가능하게 할 수 있습니다.

위에서 살펴본 예와 같은 시나리오를 통해 다양한 수준의 복잡성과 그에 따른 설계에 대한 명확한 그림을 얻을 수 있습니다 . 또한 디자인을 통해 사용자의 흐름에 대한 느낌을 얻을 수 있으므로 종이에 매핑하여 프로젝트에 대한 조감도를 구축할 수 있습니다.

설계 흐름 매핑

사용자 스토리와 시나리오를 토론의 동인으로 사용하여 높은 수준에서 디자인을 통한 경로 매핑을 시작할 수 있습니다. 앞서 설명한 사용자 스토리 매핑 프로세스는 다양한 사용자 흐름을 정의하는 데 도움이 됩니다.

프로세스의 이 시점에서 종이는 보다 세련된 스토리보드를 개발하기 전에 신속한 프로토타이핑을 위한 강력한 도구입니다 . 저비용, 저충실도 및 빠른 접근 방식인 종이 프로토타이핑에는 많은 이점이 있습니다.

비용이 저렴하여 진입 장벽이 거의 없이 여러 아이디어를 탐색할 수 있습니다.
충실도가 낮아 세부 사항에서 길을 잃지 않고 큰 그림에 집중할 수 있습니다.
속도가 빠르기 때문에 흐름의 여러 변형을 빠르게 반복할 수 있습니다.

Paper는 또한 협업을 가능하게 하여 여러 참가자가 테이블을 둘러보고 모든 사람의 의견과 통찰력을 수용하여 신속하게 디자인을 개발할 수 있도록 합니다.

종이는 초기 프로토타이핑 단계를 위한 강력한 도구입니다. 낮은 비용과 낮은 충실도는 '큰 그림'에 집중하고 디자인의 골격을 제자리에 맞추는 데 도움이 됩니다. — 종이는 초기 프로토타이핑 단계를 위한 강력한 도구입니다. 저렴한 비용과 낮은 충실도는 '큰 그림'에 집중하고 디자인의 골격을 제자리에 맞추는 데 도움이 됩니다.

마지막으로 종이는 '자신을 구합니다.' 화면에서 디자인할 때 디자인 프로세스의 여러 지점인 '상태'를 저장하는 소프트웨어의 특성으로 인해 종종 디자인 아티팩트를 잃게 됩니다. 종이 프로토타이핑을 통해 완성된 개념으로 가는 도중에 거부된 아이디어를 포함하여 전체 디자인 프로세스를 볼 수 있습니다.

내 경험상 일반적인 프로젝트는 생각을 통해 반복적으로 작업할 때 여러 라운드의 종이 프로토타입이 필요한 경우가 많습니다. 이 시점에서 화면에서 작업하는 프로세스는 너무 느리고 너무 세련되어 불필요한 세부 사항에서 빠르게 길을 잃을 수 있습니다. Paper를 사용하면 이 단계에서 중요한 큰 그림에 집중할 수 있습니다 .

물론, 경험 많은 디자이너라도 인터페이스를 스케치하는 아이디어에 직면했을 때 움츠러들 수 있고 프로세스가 겁이 날 수 있습니다. “하지만, 나는 그림을 못 그립니다!”라는 말을 듣는 것은 드문 일이 아닙니다. 이것은 명백히 사실이 아닙니다. 우리 모두는 어렸을 때 그림을 잘 그릴 수 있었습니다(부모님의 냉장고에 있는 모든 그림이 증명하듯이!). 우리는 이 귀중한 기술을 다시 배우기만 하면 됩니다.

제이슨 산타 마리아의 말을 빌리자면:

스케치는 좋은 예술가가 되는 것이 아니라 좋은 생각을 하는 것입니다.

높은 수준의 스케치가 설정되면 스토리보드와 와이어프레임을 만들어 충실도를 추가할 때입니다. 그 생각을 참아라. 그러나 와이어프레임 및 프로토타이핑에 대한 여섯 번째 기사에서 다시 설명하겠습니다.

과학의 명소: UX 법칙

UX는 비교적 새로운 분야일 수 있지만 HCI(인간 컴퓨터 상호 작용) 분야에서 수십 년 동안의 연구를 통해 알 수 있습니다.

사용자 경험 디자인의 진화에 대한 이 시리즈의 첫 번째 기사에서 언급했듯이 우리는 무엇보다도 인간을 위한 디자인이며 인간 은 디자인 결정을 내릴 때 고려해야 할 유사한 특성을 광범위하게 공유합니다. HCI는 사용자 경험 디자인 분야에 적용할 수 있는 수많은 원칙을 제공합니다.

이러한 원칙의 대부분은 예를 들어 다음과 같은 '법칙'의 형태로 정제되었습니다.

인지 부담을 줄이고 의사 결정을 촉진하기 위해 선택을 최소화 해야 할 필요성을 강조하는 힉스의 법칙 ;
인터페이스 요소의 신중한 크기 조정 및 위치 지정을 통해 상호 작용을 쉽게 할 수 있는 방법에 대한 귀중한 조언을 제공하는 Fitt의 법칙 ; 그리고
복잡한 작업을 쉽게 하기 위해 '청킹'의 이점 을 강조하는 밀러의 법칙 .

이러한 원칙은 거시적 수준과 미시적 수준 모두에 적용할 수 있으며 디자이너로서 개선하기 위해 깊이 탐구할 가치가 있습니다. 힉스의 법칙, 피트의 법칙, 밀러의 법칙 등 세 가지를 살펴보겠습니다. 하지만 더 많은 것이 있습니다.

Jon Yablonski의 훌륭한 사이트인 Laws of UX는 책갈피할 가치가 있는 유용한 원칙 모음입니다. 그 자체로 멋진 디자인일 뿐만 아니라 각 원칙에 대한 좋은 개요와 더 읽을 수 있는 링크도 제공합니다.

힉스의 법칙

Hick의 법칙(또는 전체적으로 Hick-Hyman 법칙)은 다음과 같이 기술합니다.

결정을 내리는 데 걸리는 시간은 선택의 수와 복잡성에 따라 늘어납니다.

한 쌍의 심리학자인 William Edmund Hick과 Ray Hyman의 이름을 따서 명명된 이 법 은 사용자에게 제공하는 선택의 수를 줄이는 것의 중요성을 강조합니다.

끝없는 선택의 연속을 제공하여 사용자를 돕고 있다고 생각할 수도 있지만 실제로는 사용자의 인지 부담을 가중시키고 있습니다. 사용자가 직면하는 선택이 많을수록 ' 결정 마비 '로 인해 발을 헛디딜 확률이 높아집니다. 이는 사용자가 자리를 비우면 수익에 직접적인 영향을 미치는 전자 상거래 환경에서 특히 문제가 될 수 있습니다.

A Book Apart는 최근 릴리스를 제공합니다. — A Book Apart는 홈 페이지에 모든 책을 나열하는 대신 최근 릴리스를 제공하여 선택의 수를 줄이고 결정 마비를 완화합니다. 특정 책을 찾는 사람들은 클릭 한 번으로 전체 라이브러리를 볼 수 있습니다.

Hick의 법칙을 UX 디자인에 다양한 방식으로 적용할 수 있습니다.

끝없는 선택 목록을 제공하는 대신 탐색을 만들 때 몇 가지에만 집중하세요 . 사용자는 감사할 것입니다.
전자 상거래 맥락에서 모든 단일 제품을 나열하는 대신 선택의 수와 초점을 줄이십시오. 이렇게 하면 더 높은 전환율로 이어지는 결정 마비를 상쇄할 수 있습니다.
필수 콘텐츠와 보조 콘텐츠를 구분합니다. 사용자가 더 적은 수의 선택을 통해 경로를 찾 도록 함으로써 인지 부담을 줄일 수 있습니다 .

우리는 종종 '더 많은 것'을 '더 나은 것'과 동일시하는 죄를 범하지만 힉스의 법칙은 다르게 생각하라고 말합니다. 옵션의 수가 많을수록 사용자가 결정에 도달하는 데 더 오래 걸립니다(때로는 사용자가 결정을 내리지 않게 됩니다). 선택의 폭이 점점 더 좁아지는 세상에서는 특히 초점이 중요합니다.

피트의 법칙

Fitt의 법칙은 다음과 같이 말합니다. 표적을 획득하는 데 걸리는 시간은 표적까지의 거리와 크기의 함수입니다. 번역하면 다음과 같습니다. 예를 들어 화면의 버튼과 같이 목표가 멀수록 사용자가 쉽게 도달할 수 있으려면 더 커야 합니다.

Fitt의 법칙은 버튼 및 기타 클릭 가능한 화면 요소를 디자인할 때 특히 중요합니다. 상황에 따라 다른 접근 방식이 필요하며 디자인 접근 방식을 알려줍니다.

인터콤은 클릭 유도문안 버튼이 크고 눈길을 끄는지 확인합니다. — Intercom은 홈페이지에서 클릭 유도문안 버튼이 크고 눈길을 끌기 때문에 보고 탐색하기 쉽도록 합니다.

데스크탑 컨텍스트에서 사용자는 큰 화면에서 마우스를 사용하여 잠재적으로 먼 거리를 이동할 것입니다. 이러한 맥락에서 클릭 유도문안 버튼(CTA)의 크기가 적절하고 보고 클릭하기 쉬운지 확인 하는 것이 중요합니다.

모바일 컨텍스트에서는 인터페이스를 설계할 때 탭 대상을 고려하는 것이 중요합니다. 터치스크린용으로 디자인할 때 손가락은 마우스 포인터보다 정확도가 낮으므로 탭 대상 크기를 늘려야 합니다 . (물론 데스크탑 환경에서 더 큰 탭 타겟도 도움이 될 수 있습니다!)

Fitt의 법칙을 UX 디자인에 다양한 방식으로 적용할 수 있습니다.

모바일용으로 디자인할 때 탭 타겟을 고려하세요. 더 적은 화면 공간 으로 클릭 가능한 요소의 수를 줄이고 크기를 늘 립니다.
당연하게 들릴 수 있지만 화면에 큰 버튼이 있는 경우 기본 클릭 유도문안인지 확인하세요. 그렇지 않으면 사용자가 실수로 버튼을 클릭할 위험이 있습니다.
드롭다운 메뉴 또는 다른 형태의 중첩 탐색을 디자인할 때 대상 크기가 사용자가 획득할 수 있을 만큼 충분히 커야 합니다 .

일반적으로 말해서 무언가가 멀수록 사용자가 치려면 더 커야 합니다. 높은 수준에서 디자인을 계획할 때 중요한 행동 유도문안을 고려하고 이를 디자인할 때 Fitt의 법칙을 준수했는지 확인하십시오. 작은 버튼은 깔끔하고 단정해 보일 수 있지만 사용자가 불편을 겪으면 디자인 작업이 필요합니다.

밀러의 법칙

밀러의 법칙은 다음과 같이 말합니다. 평균적인 사람은 작업 기억에 7개(플러스 또는 마이너스 2개) 항목만 저장할 수 있습니다. 요컨대: 우리가 짧은 시간에 머리에 담을 수 있는 것은 너무 많습니다.

Miller의 법칙은 정보를 구성하고 그룹화하는 방법을 고려할 때 특히 중요하며 청킹이 유용할 수 있는 부분입니다. 다음 두 전화 번호(둘 다 동일한 가상 번호)의 형식을 고려하십시오.

07700984964
07700 984 964

공백이 없는 일련의 숫자로 11자리 숫자는 사용자가 작업 메모리에 유지하기 어렵습니다. 그러나 약간의 간격을 추가하면 사용자의 작업이 상당히 쉬워집니다. 정보를 청크함으로써 사용자는 작업 메모리에 3개의 숫자 그룹을 유지하여 작업을 완료할 수 있습니다.

카드 번호 및 세부 정보를 입력할 때 사용자를 돕습니다. — Gumroad에 신용카드 정보를 입력하면 스페이스가 추가되어 신용카드 숫자를 4개의 그룹으로 묶습니다. 이렇게 하면 사용자가 카드 번호를 입력할 때와 올바른 카드 세부 정보를 입력했는지 여부를 확인하는 데 도움이 됩니다.

밀러의 법칙은 이와 같은 미세 상호 작용을 완화하는 것 이상입니다. 그것은 또한 더 거시적인 규모로 사용될 수 있습니다. 예를 들어, 양식을 디자인할 때 정보를 논리적으로 구성된 그룹(이름, 주소 및 연락처 세부 정보)으로 나누는 데 중점을 둡니다 . 사용자 이름 및 비밀번호와 같은 계정 세부 정보 은행 계좌 정보; 및 기타 그룹화.

Miller의 법칙을 다양한 방식으로 UX 디자인에 적용할 수 있습니다.

전화번호를 나열할 때 작업 기억에 쉽게 저장할 수 있도록 정보를 청크합니다 .
신용 카드 정보가 포함된 결제 양식을 디자인할 때 신용 카드 번호가 4개로 나누어지면 사용자가 신용 카드 번호를 더 쉽게 구문 분석할 수 있습니다.
제공되는 선택의 수를 제한하여 인지 부하를 줄 입니다.

디자이너로서 우리는 종종 복잡한 정보를 제시해야 합니다. Miller의 법칙은 이러한 맥락에서 염두에 두는 데 유용합니다. 가능한 경우 사용자의 작업 메모리에 더 쉽게 보유할 수 있도록 세분화 및 청크화할 수 있는 정보 그룹을 찾습니다.

모양과 느낌: 시각적 디자인 커뮤니케이션

프로젝트 흐름에 대한 조감도가 설정되면 시각적 디자인뿐만 아니라 모양과 느낌에 대해 생각하는 것이 중요합니다. 이것이 제가 '시각적 문법'이라고 부르는 것이며 디자인에서 채택할 시각적 접근 방식입니다.

시계, 휴대폰(작은 것부터 큰 것까지), 태블릿, 데스크탑 및 기타 미디어용으로 설계할 장치가 계속해서 증가함에 따라 단일 픽셀의 완벽한 비주얼을 개발한다는 아이디어는 구식이 되었습니다.

이러한 변화하는 환경에 대응하여 우리는 디자인의 '맛'을 포착하기 위해 픽셀 완전성에서 멀어지는 디자인 아티팩트를 향한 움직임을 보았습니다. 이러한 아티팩트에는 다음이 포함됩니다.

무드보드
스타일 타일
요소 콜라주

모든 사람의 프로세스는 다르지만 프로세스의 이 단계에서는 방향을 설정하는 데 도움이 되도록 무드 보드와 요소 콜라주를 함께 사용합니다. 사용자 인터페이스 디자인.

무드보드

무드보딩은 이름에서 알 수 있듯 분위기를 조성하여 전체 목표에 맞는 특정 모양과 느낌에 집중할 수 있도록 도와줍니다. 기분 게시판은 대화를 시작하는 데 유용하며, 이를 바탕으로 집중할 수 있습니다. 일반적으로 나는 보통 3~5개의 서로 다른 무드보드를 조립하는데, 각각은 서로 다른 방향을 표시합니다.

당신은 특정한 모양과 느낌을 염두에 두고 있을 수 있지만 — 우리 모두가 잘 알고 있듯이 — 귀하가 선호하는 옵션이 클라이언트의 관점과 일치하지 않을 수도 있습니다. 나는 대안을 갖는 것이 도움이 되며 종종 다른 무드 보드의 다른 요소를 함께 그리는 최종 결과를 찾습니다.

Tiny Books 웹사이트의 무드 보드 — Tiny Books의 무드 보드를 개발할 때 아날로그(왼쪽)와 디지털(오른쪽) 접근 방식을 모두 채택했습니다. 내 디지털 무드 보드는 사이트의 브랜딩을 친절하게 개발한 Vic Bell에게 방향을 제시하는 데 도움이 되었습니다.

결론: 이 단계에서는 화면 크기가 크게 다른 시대에 헛된 픽셀 완벽한 디자인을 만드는 데 길을 잃지 않고 높은 수준의 시각적 디자인을 제시하고 있습니다. 자세한 목업은 와이어프레임 및 프로토타이핑 단계에서 이어집니다.

프로세스의 이 시점은 대화를 촉발하는 데 사용할 수 있는 디자인 아티팩트를 개발하는 것입니다. 창의적인 토론을 이끌어 내기 위해 각기 다른 모양과 느낌을 가진 다양한 무드 보드 를 사용하는 것이 좋습니다.

무드 보드를 구성할 때 아날로그 방식과 디지털 방식을 모두 고려 하는 것이 중요합니다. 시각적 영감이 100% 디지털인 경우 한 디자인이 다른 디자인과 똑같이 보이는 모든 것을 동일하게 보이게 하는 위험을 감수해야 합니다. 영감을 얻기 위해 화면 너머를 바라보고 영감을 얻기 위해 원치 않는 오래된 잡지를 사용하는 것을 고려하십시오. 그러면 디자인이 돋보일 것입니다.

요소 콜라주

무드 보드에 수집된 피드백과 함께 몇 가지 디자인 구성 요소 개발을 시작할 때입니다. 시각적 방향을 몇 가지 일반적인 사용자 인터페이스 요소에 적용하여 '시각적 문법'에 정착할 수 있습니다.

스타일 타일 및 요소 콜라주를 포함하여 이를 수행하는 데 사용할 수 있는 도구가 많이 있습니다. 둘 다 장점이 있으며 주로 완성된 모양과 느낌을 위한 촉매 역할을 합니다.

Style Tiles 방법론을 개발한 Samantha Warren은 다음과 같이 말합니다.

스타일 타일은 클라이언트의 선호도와 목표에 대한 토론을 위한 촉매제입니다.

모양과 느낌에 대한 논의를 강조하는 이 두 가지 방법의 강점은 바로 이 점입니다. 그들은 상당한 시간을 절약하여 이 단계에서 여러 크기로 완벽한 픽셀 렌더링을 생성할 필요가 없습니다.

내 경험에 따르면 스타일 타일은 시각적 모형이라고 잘못 생각하는 고객이 잘못 읽을 수 있습니다. 저는 좀 더 자유로운 형식과 덜 템플릿 기반 접근 방식을 선호하며 Dan Mall의 Element Collage 접근 방식을 발견했을 때 푹 빠졌습니다.

읽기를 위한 Dan Mall의 요소 콜라주는 기본입니다. — Dan Mall의 Reading Is Fundamental과 같은 요소 콜라주는 다양한 시각적 요소를 캡처하고 잠재적인 디자인 방향에 대한 대화를 시작하는 데 도움이 됩니다.

Reading Is Fundamental 프로젝트에 대한 자신의 디자인 프로세스를 자세히 설명한 훌륭한 게시물에서 Mall은 프레젠테이션을 대화로 대체하여 클라이언트가 프로세스에 참여하도록 해야 한다고 강조합니다. 요소 콜라주는 이러한 대화 방식을 추진하는 훌륭한 방법입니다. 몰이 말했듯이:

고객과 디자인에 대해 이야기할 때 같은 내용에 대해 이야기할 수 있도록 최대한 많은 시각적 자료를 사용하고 싶습니다. 내 스타일 타일 버전은 '요소 콜라주'라고 부르는 다른 유형의 실행을 위한 콜라주에 대한 내 사랑을 통합합니다. 그 특정 문구는 우리가 보고 있는 것이 최종 디자인이 아니라 특정 논리나 순서가 없는 이질적인 조각의 집합이라는 기대를 불러일으킵니다.

요소 콜라주의 장점은 무드 보드와 (곧 개발될) UI 구성 요소 사이의 다리 역할을 한다는 것입니다. 그들은 우리가 구축할 것에 대한 느낌을 확립하기 위해 클라이언트를 보여줄 만큼 충분히 유연합니다. 무엇보다 시간 집약적인 프로토타입 개발을 시작하기 전에 시각적 문법에 대한 합의를 도출하는 데 도움이 되는 유용한 도구입니다.

마감 중

프로젝트의 설계 단계를 시작하기 위한 높은 수준의 프로세스를 설정하면 보다 효율적으로 작업하여 명확한 프레임워크를 마련할 수 있습니다. 프로세스의 이 단계에서는 세부 사항을 놓치지 않고 넓은 브러시 스트로크를 제자리에 맞추는 데 집중하는 것이 중요합니다.

UI 디자인과 와이어프레임 및 프로토타입 개발에 대해 더 깊이 알아보기 직전에 광범위한 브러시 스트로크를 얻는 것이 중요합니다. 세부 사항에 들어가기 전에 명확한 디자인 방향과 몇 가지 명확한 사용자 목표를 설정하는 데 중점을 둡니다 . 명확한 설계 목표 없이 세부 사항에 집중하려는 충동을 참으면 낭비되는 작업을 절약할 수 있습니다.

요컨대, 모든 것이 매핑될 때까지 세부 사항에서 길을 잃지 마십시오.