UX 스케치에 대해 알아야 할 모든 것

진지한 창작 활동을 해본 적이 있다면 크리에이티브 블록에 너무 익숙할 것입니다. 마치 벽돌 벽에 부딪힌 것 같은 느낌 입니다. 시각화할 수 있는 아이디어 중 어느 것도 충분히 좋지 않거나 실제 생활에서 작동하지 않습니다.

디자이너들에게 그 느낌은 너무나 익숙합니다. 그러나 명확한 해결책이 없는 복잡한 문제와 마찬가지로 스마트 프로세스가 모든 차이를 만들 수 있습니다. 여기에서 UX 스케치가 등장합니다.

UX 스케치는 사용자 경험 디자인의 중요하지만 종종 간과되는 측면입니다. 스케치는 디자이너가 여러 아이디어를 시도하고 하나에 정착하기 전에 반복할 수 있도록 하는 동시에 디자인을 전달하는 매우 효율적인 방법입니다.

이 게시물에서는 다음 사항을 포함하여 UX 스케치에 대해 알아야 할 모든 것을 다루고자 합니다.

• UX 스케치 및 와이어프레임 소개
• UX 스케치 기본, 도구 및 기술
• 메모, 주석, 숫자로 스케치를 명확하게 하기
• UX 스케치 팁과 트릭
• 품질과 생산성 향상을 위해 설계된 미니 방법
• Wireflows에 대해 알아야 할 모든 것
• UX 흐름 스케치에 대한 빠른 가이드

UX 스케치는 2단계 프로세스입니다

설계 시 많은 옵션을 고려해야 하므로 최상의 옵션을 선택하고 실행해야 합니다. 디자이너는 옵션을 고려한 다음 세부 사항을 진행하여 UX 디자인을 2단계 프로세스로 만듭니다.

• 아이디어 생성

초기 단계에서는 여러 아이디어가 생성되지만 완전히 형성될 수 없기 때문에 일부 요소가 불완전하거나 누락되는 경우가 많습니다. 가장 중요한 것은 다양한 접근 방식을 고려하고 작업의 맥락과 프로젝트의 다양한 제약 조건에서 가장 효율적인 방법을 결정하는 것입니다.

• 디테일 추가 및 개선

단계별로 몇 가지 유망한 변형을 결정하고 세부 사항을 해결하기 위해 진행하여 일부 아이디어를 부적합하게 만듭니다.

UX 스케치 및 와이어프레임: 소개 및 분류

와이어프레임은 원하는 세부 수준, 색상 및 스타일, 누군가에게 보여줄지 여부 등과 같은 요인에 따라 다를 수 있습니다.

다음과 같은 스케치 유형을 선택했습니다.

• 스케치: 아이디어 생성

초기 스케치입니다. 낮은 수준의 세부 사항은 간단히 기록됩니다. 제한된 수의 색상이 사용됩니다.

나는 여러 각도에서 문제를 고려하고 다른 솔루션을 고려하기 위해 기본 스케치를 많이 그립니다. 그러한 스케치를 그리는 동안 가능한 한 많은 솔루션 변형을 생성하기 위해 노력하고 있습니다.

이 특정 단계에서 불완전함은 내 마음을 자유롭게 하므로 이 단계에서 사소한 부분에 얽매이지 않는 것이 매우 중요합니다. 제 목표는 가능한 한 많은 아이디어를 생성하고 가장 유망한 아이디어를 선택하는 것입니다.

• 와이어프레임: 사양, 세부 단계

나는 일반적으로 유망한 스케치를 선택하고 세부 사항을 검토한 후 최상의 변형을 선택하고 더 자세히 작업합니다.

그러나 이것이 모든 세부 사항을 의미하는 것은 아닙니다 . 명백한 사항은 참고할 수 있습니다. 또한 일부 측면은 종이에 설명하기 어려울 것입니다.

이 단계에서 중요한 세부 사항 을 모두 그립니다. 그러나 아직 Balsamiq에서 와이어 프레임을 그리지는 않습니다. 종이에 모든 작업이 끝나면 스케치에서 그리기 시작합니다.

디지털 도구는 종이보다 훨씬 더 창의적인 자유를 제공하며 사소한 일에 쉽게 주의를 기울일 수 있습니다. 예를 들어 디자인 대신 "픽셀 연마"에 집중할 수 있습니다.

• 시각 디자인 초안

이것은 거의 사용되지 않는 접근 방식이지만 때로는 도움이 될 수 있습니다. 프로젝트의 초기 단계에서 다양한 시각적 솔루션이 고려되지만 모든 솔루션에 대한 디지털 스케치를 만드는 데 오랜 시간이 걸릴 수 있습니다. 그래서 먼저 종이에 디자인 스케치를 그려서 다양한 옵션을 고려하고 시각적 디자인 방향을 선택합니다.

• 구성 요소/요소 분석

이미 일반적인 아이디어가 있고 특정 페이지 기능이나 인터페이스 구성 요소의 필수 부분에 대해 생각하고 있을 때 이 기술이 유용하다는 것을 알았습니다. 다른 페이지 요소를 그려서 자세히 설명한 다음 페이지 요소의 가능한 다른 위치를 그립니다.

가장 단순한 요소일지라도 요소에는 상태가 있어야 합니다. 버튼을 누를 수 있으며 비어 있을 수도 있고 비어 있지 않을 수도 있는 호버 텍스트 블록이 있습니다. 더 복잡할수록 더 많은 상태를 갖습니다.

기본 사항 시작하기

• 도구를 준비하십시오. 가장 편리한 장소, 충분한 공간이 있는 큰 테이블을 찾으십시오. 많은 종이를 가지고 펜과 마커를 준비하십시오.
• 워밍업. 준비하기 위해 몇 가지 선, 원, 기본 템플릿 및 아이콘을 그리는 것이 좋습니다.
• 목표를 정의하십시오. 그리고 싶은 것을 결정하십시오. 목표를 설정하고 어떤 이야기를 들려줄지 결정하세요. 원하는 세부 수준을 결정합니다. 많이 그릴 준비가 되었는지 결정합니다.
• 타겟 고객을 정의합니다. 이 작업을 직접 수행하는 경우 스케치 모양에 대해 걱정할 필요가 없습니다. 그러나 고객에게 도면을 보여주려는 경우 스케치에 세부 사항을 추가할 시간을 추가로 허용하십시오.
• 시간 프레임을 설정합니다. 스케치를 위해 할당할 준비가 된 시간을 결정했다면 30분 정도가 작업에 집중하는 데 도움이 될 것입니다.

이제 모든 설정이 완료되었으며 시작할 수 있습니다.

• 가장자리를 그립니다. 프레임, 브라우저 또는 전화 창, 인터페이스의 일부 등을 그립니다.

• 메뉴, 바닥글, 주요 콘텐츠와 같이 가장 크거나 기본적인 요소를 추가합니다 .

• 세부정보를 추가합니다. 관련 세부정보를 추가하되 이 단계에서는 단순하게 유지하세요.

• 주석 및 메모를 추가합니다. 스케치를 공유하려는 경우에만 필요합니다. 그러나 눈에만 사용하는 경우에도 유용할 수 있습니다.

• 스케치 대안. 솔루션에 대한 몇 가지 빠른 대안을 스케치합니다.

• 최상의 솔루션을 선택하십시오. 최상의 옵션을 선택하십시오.

• 그림자와 경사를 추가합니다. 이는 공유 목적에 특히 중요합니다. 스케치를 시각적으로 매력적으로 만들기 위해 그림자를 추가하십시오. 이는 팀 구성원 및/또는 고객과 공유하려는 경우 중요합니다.

• 스케치를 저장합니다. 사진을 찍거나 폴더에 넣으십시오. 제 책상에는 스케치를 위한 종이 트레이가 몇 개 있습니다.

• 공유하다. 나는 일반적으로 다음 공유 방법 중 하나를 사용합니다.
  • Evernote를 통해 스케치를 스캔하고 다른 팀원이나 이해 관계자에게 영구 링크를 제공하세요.
  • 사진을 찍어 InVision에 업로드합니다.
  • Realtimeboard에 이미지를 업로드하고 매핑합니다.
  • 아니면 사진을 이메일 로 보내주세요.
• 스케치를 검토하고 메모를 추가합니다. 잠시 쉬었다가 잠시 후 스케치로 돌아오십시오. 다시 한 번 살펴보세요. 스케치가 여전히 의미가 있습니까? 좋은 스케치는 따라하기 쉬워야 합니다.

추가 요소로 스케치 명확화

적절한 스케치를 찾거나 그린 후 다음 세부 정보를 추가합니다.

1. 제목. 때로는 제목을 추가하는 것이 좋은 옵션입니다. 필요한 경우 스케치 상단에 설명과 날짜를 적습니다. 제목은 당신이 보고 있는 것과 스케치가 관련이 있는지 여부를 이해하는 데 도움이 될 것입니다. 이것은 스케치가 많거나 다른 사람에게 보여줄 때 특히 유용합니다.

2. 주석. 주석은 내용 또는 기타 속성을 설명하기 위해 요소 가까이에 배치된 이름 및 메모입니다. 그들은 다른 요소를 명확히 하고 일반적으로 그리기 어려운 세부 사항을 추가합니다. 예를 들어 블록 이름, 상호 작용 세부 정보, 그림 설명, 향후 디자인 변형에 대한 아이디어 등이 될 수 있습니다. 내 예제 중 하나를 확인하여 주석 스케치가 어떻게 생겼는지 확인할 수 있습니다.

3. 숫자. 스케치의 요소 또는 스케치 자체에 번호를 매깁니다. 주문 방법을 결정할 수 있습니다(예: 상호 작용 흐름, 생성 순서 등). 동료와 고객이 피드백에서 스케치 번호를 지적할 수 있기 때문에 토론(특히 원격 토론) 중에도 유용할 수 있습니다.

4. 화살표. 화살표를 사용하여 화면 전환을 나타낼 수 있습니다. 또한 스케치의 다른 부분을 연결하고 일련의 작업을 나타내는 등의 작업에 사용할 수 있습니다. 화살표의 의미는 다양할 수 있으므로 화살표 바로 위에 화살표가 의미하는 바에 대한 설명이나 설명을 추가할 수 있습니다. 다음은 전환 및 여러 다른 상태를 보여주는 기본 스케치의 예입니다.

5. 메모. 주석과 마찬가지로 메모는 개념을 설명하는 데 사용됩니다. 그러나 메모는 배치에서 주석과 다릅니다. 이 예와 같이 요소에 부착되지 않거나 설명된 요소 근처에 위치하지 않습니다. 메모는 페이지 상단 또는 하단에 배치할 수 있습니다. 그들은 디자인에 포함되지 않은 요소, 가질 수 있는 질문, 일반적인 설명, 스케치되지 않은 아이디어 등을 설명할 수도 있습니다.

6. 제스처. 제스처는 터치 장치 디자인과 관련이 있습니다. 손짓을 그리는 것은 연습이 필요할 수 있습니다. 다양한 유형의 동작을 나타내는 데 사용되는 제스처에는 여러 가지 변형이 있으므로 특정 동작을 지정하는 방법(물론 명확하지 않은 경우)을 미리 결정하고 그리는 연습을 하는 것이 좋습니다.

7. 피드백. 스케치를 다른 사람에게 보여주거나 직접 검토한 후 수정 또는 개선에 대한 제안을 받을 수 있습니다. 원래 스케치와 피드백을 구별하는 데 도움이 되도록 이러한 피드백을 다른 색상으로 표시하는 것이 종종 유용합니다.

다양한 유형의 요소에 다른 색상을 사용할 수 있습니다. 때로는 그림에 검은색, 링크에 파란색, 메모에 짙은 녹색, 제목 및 피드백에 빨간색을 사용합니다. 스케치에 다양한 색상을 사용하되 색상 선택이 일관적인지 확인하십시오!

더 구체적인 팁과 요령

1. 품질에 대해 걱정하지 마십시오. Dribbble에서 스케치를 보지 마십시오. 그것들은 완전히 다른 것에 관한 것입니다. 스케치의 주요 목적은 더 명확하게 생각하고, 더 나은 솔루션을 찾고, 시간을 절약하는 데 도움이 된다는 점입니다.

2. 관행. 처음에는 몇 가지 앱을 그려볼 수 있습니다. 웹 또는 모바일 앱을 열고 메모의 요소를 설명하는 화면을 복사해 봅니다. 자유 시간이 있을 때마다 디자인의 기본 빌딩 블록을 그리는 연습을 하십시오. 일반적으로 연습이 완벽을 만듭니다. 잠시 후, 그것은 당신의 디자이너 자신의 일부가 될 것입니다.

3. 폴더를 구입하십시오. 나는 종종 사무실에서 일하지 않고 카페나 집에서 일합니다. 종이 스케치는 손상되기 쉬우므로 간단한 폴더를 구입하여 안전하게 보관하십시오.

4. 어디를 가든지 도구를 가지고 가십시오. 이렇게 하면 언제든지 종이에 아이디어를 캡처할 수 있습니다. 그렇지 않으면 생각을 잊어버리거나 충분히 자세히 기억하지 못할 수 있습니다. 항상 메모장과 A4용지 몇 장, 펜을 가지고 다닙니다.

5. 다른 사람들과 공유하십시오. 다른 사람들을 참여시키고 팀과 의사 소통하는 것이 매우 중요합니다. 특히 초기에 다른 사람들을 참여시키고 피드백을 받는 것은 장기적으로 시간과 자원을 절약하는 데 도움이 됩니다. 다른 사람들이 디자인을 구상하는 방식으로 그리도록 격려할 수도 있습니다.

6. 종이 트레이. 작업대에 종이 트레이를 놓는 것을 생각해 보십시오. 예를 들어, 들어오는 작업, 스케치 및 깨끗한 종이 시트의 세 가지가 있습니다.

7. 실험하고 사용자 정의하십시오. 내 추천은 내 경험을 기반으로 합니다. 시간이 지나면 가장 적합한 것이 무엇인지 알게 될 것입니다. 어떤 방법, 어떤 단계의 순서, 당신의 창의적 잠재력을 정확히 충족시키는 것. 끊임없이 새로운 것을 시도할 때만 도달할 수 있습니다. 그렇기 때문에 다양한 형식, 스타일을 실험하고 새로운 템플릿을 시도하는 것이 중요합니다.

8. 템플릿을 사용합니다. 템플릿은 시간을 절약하고 형식 제한을 암묵적으로 고려하여 중요한 것에 집중할 수 있는 더 많은 시간을 확보합니다.

스케치를 개선하기 위한 추가 미니 방법

이것들은 반드시 팁과 트릭은 아니지만 생산성을 높이거나 스케치 품질을 향상시키는 방법, 도구 및 제안의 모음입니다.

1. 스케치 보드를 만듭니다. 디지털 스케치 도구 대신 펜과 종이를 사용하는 가장 큰 이점 중 하나는 실제로 벽에 붙일 수 있다는 것입니다. 팀의 모든 사람이 이를 보고 참여할 수 있습니다(검토 세션을 설정하는 것이 좋습니다).
   
   • 스케치를 직접 볼 수 있으며, 이는 사고를 자극하고 개별적인 부분이 아닌 전체 시스템을 볼 수 있도록 해줍니다. 부품 간의 상호 작용과 부품이 서로 맞는 방식을 볼 수 있습니다.
     
   • 스케치 보드 만들기 - 화이트보드 스케치를 첨부합니다. 사무실에 화이트보드가 없다면 양면 테이프나 포스트잇을 사용하여 스케치를 벽에 붙일 수 있습니다. 벽에 붙이고 싶지 않다면 대신 큰 종이 조각을 찾을 수 있습니다. 스케치 보드는 최고의 디자인 도구 중 하나이므로 사용하는 것이 좋습니다.
2. 화이트보드를 사용하세요. 화이트보드는 훌륭한 그리기 도구입니다. 다음과 같은 장점이 있습니다.
   • 그것은 협력적이며 토론과 그림에서도 다른 팀원들을 쉽게 참여시킬 수 있습니다. 그들의 생각이 잘 맞지 않더라도 그들의 사고 방식을 이해하고 같은 페이지에있는 데 도움이 될 것입니다.
     
   • 마커를 사용하면 세부 사항에 집중할 수 없으며 일반적인 사항에 대해 생각해야 합니다. 스케치는 해석의 여지가 있습니다.
     
   • 화이트보드는 쉽게 청소하고 수정할 수 있습니다.
     
   • 공간이 많고 전체 시스템 흐름을 쉽게 생각할 수 있습니다.
     
   • 자석을 사용하여 스케치, 인쇄물 및 참고 자료를 첨부할 수 있습니다.

3. 프로토타입. 클릭 가능한 프로토타입을 만들어 디자인을 평가하세요. 몇 가지 요소에 대한 피드백을 얻으십시오. 이것은 템플릿을 사용할 때 특히 효과적입니다. 스케치의 크기는 동일합니다. 분명히 템플릿을 사용하면 같은 크기의 스케치를 그리는 것이 훨씬 쉬울 것입니다. 모바일, 브라우저 다중 창, 브라우저 스크롤, 페르소나 등 다운로드하여 사용할 수 있는 몇 가지 템플릿을 제공하여 더 쉽게 만들도록 노력하겠습니다.

   

4. 프린터와 스캐너를 사용하십시오. 프레임워크를 손으로 그린 ​​다음(자를 사용하여 더 정확하게 그릴 수 있음) 스캐너나 모바일 앱을 사용하여 스캔하고 인쇄하기만 하면 됩니다. 인쇄하기 전에 이미지 편집기에서 템플릿을 편집할 수 있습니다. 불필요한 세부 사항을 제거하거나 일부 요소를 복제할 수 있습니다. 기성품 사이트 페이지, 사진 및 기타 설명 요소를 인쇄할 수도 있습니다. 스케치에 잘라낸 부분을 붙여넣을 수 있습니다.

5. 스캔에 Evernote를 사용하세요. Evernote는 훌륭한 디자인 도구입니다. 스케치를 보관 및 공유할 수 있으며 테마를 생성하고 태그를 사용하여 스케치를 구성할 수 있습니다. "스캐너" 모드의 기능은 특히 인상적입니다. 스케치를 앞에 놓고 "스캔"하여 스케치 사본을 얻습니다. 그런 다음 동료를 Evernote로 초대하고 메모 링크를 제공할 수 있습니다. 태블릿 및 휴대폰용 모바일 앱이 있으므로 언제든지 스케치를 손에 넣을 수 있습니다.

6. 하이브리드 스케치. 스케치에 생동감과 사실감을 더하기 위해 사진과 결합할 수 있습니다. 즉, 사진을 찍은 다음 인터페이스 요소를 사용하여 스토리를 그려야 합니다. 이것은 또한 몇 가지 상호 작용 문제와 세부 정보를 알아차리는 데 도움이 될 수 있습니다.

7. 현실 세계를 추적합니다. 스토리보드를 만들고 특정 상황에서 경험을 설명해야 하는 경우(예: 버스 정류장에서 스마트폰을 사용하는 사람) 사람, 장소 및 다양한 실제 사물에 대한 묘사를 포함해야 합니다. 이는 특히 그리기 기술을 마스터하지 않은 경우 그리기 어려울 수 있지만 간단한 팁이 있습니다. 개체 또는 상황의 사진을 찍은 다음 이미지 편집기를 사용하여 주요 개체 윤곽을 얻습니다. 나중에 스케치에서 결과 윤곽을 사용할 수 있습니다. 물론 태블릿과 스타일러스 가 있다면 훨씬 더 쉬울 것입니다.

Wireflow: 시스템 흐름 및 분기 개요

와이어플로는 본질적으로 분기와 결정 지점이 있는 시스템 흐름의 시퀀스입니다. 사용자가 작업을 처리하는 방법, 화면에서 화면으로 이동하는 방법, 시간이 지남에 따라 제품에 대한 전반적인 경험을 고려해야 합니다.

Wireflow 또는 그리는 대상과 연결 방식은 다음 접근 방식에 따라 구성할 수 있습니다.

• 순서. 시퀀스는 화면마다 이어지는 직선 여정입니다. 또한 결정 지점이 있는 이야기일 수도 있습니다. 여정뿐만 아니라 결정 지점과 사용자가 선택할 수 있는 다양한 경로도 보여줍니다. 화면 상호작용의 구조를 보여줄 수 있습니다.
• 상태 변경. 일부 요소의 다양한 화면 상태와 이러한 상태 간의 전환을 유발하는 조건 또는 작업을 설명합니다.
• 화면 대 화면 요소. 전체 화면을 그리거나 미세 상호 작용 및 상호 작용을 고려할 수 있습니다.
• 플랫폼. 하나의 플랫폼 경험 또는 여러 플랫폼을 고려할 수 있습니다.
• 범위. 사용자 여정의 일부를 묘사할 것인가 아니면 전체 여정을 묘사할 것인가? 시스템과의 한 사용자 상호 작용 또는 여러 사용자의 상호 작용?

나는 일반적으로 조직과 실제 사용에 따라 다음과 같은 와이어플로 유형을 정의하려고 합니다.

1. 전체 흐름 및 상위 수준 흐름 매핑. 화면 이동을 즉시 스케치하고 제품 사용의 일반적인 여정을 그립니다. 여기에 일부 컨텍스트를 포함할 수 있으며 선택적으로 일부 사용자 상호 작용을 표시할 수 있습니다. 예를 들어, 전자 상거래 쇼핑 서비스는 사용자가 상점을 찾은 방법, 제품 주문 단계, 지불 방법 등 많은 단계를 포함할 수 있는 상당히 긴 여정입니다.

2. 화면 흐름. 이것은 시스템을 통한 특정 기능 흐름에 중점을 둡니다. 그것은 화면의 작은 직선 시퀀스 또는 분기가 있는 여정일 수 있습니다. 예를 들어 사용자가 일부 사진이나 비디오를 업로드합니다.

3. 탐색 체계. 화면과 화면에 포함된 옵션을 그립니다. 이것은 여행을 매핑해서는 안됩니다. 이 단계에는 사용자가 선택할 수 있는 옵션, 사용자가 가지고 있는 방향 및 다양한 앱 부분을 보여주는 정보가 포함됩니다. 나는 보통 프로젝트를 시작할 때 탐색 체계를 만듭니다. 탐색이 어떻게 구성되어야 하는지(어떤 포인트가 포함되어야 하는지, 얼마나 많은 수준이 필요한지)을 이해하는 역할을 합니다.

4. 화면 상태. 화면 또는 요소 상태를 그립니다(예: 파일 업로드 대화 상자). 예를 들어 이 경우 화면에는 다음과 같은 상태가 표시됩니다.

   • 공백
   • 사용자가 활성 영역에서 파일을 가져옵니다.
   • 파일을 업로드 중입니다
   • 파일이 업로드됩니다
   • 오류가 있습니다

UX 흐름 스케치: 빠른 방법 가이드

와이어플로우 설계 프로세스는 와이어프레임 프로세스와 유사합니다. 많은 단계가 비슷하거나 동일하지만 몇 가지 중요한 차이점이 있습니다.

그릴 필요가 있는 것을 정의하십시오. 그리고 싶은 것을 정확히 결정하십시오(예: 일반적인 역사나 디자인의 일부). 다른 옵션을 생성하거나 하나의 여정의 세부 사항을 생각하고 싶습니까? 스케치를 다른 사람에게 보여줄지 여부를 결정합니다.

도면에 포함해야 하는 키프레임 및 전환을 정의합니다. 모든 화면을 추가하고 이동하면 와이어플로가 매우 길고 복잡해집니다. 작업을 수행하는 데 도움이 되는 상호 작용의 본질을 전달하기 위해 표시해야 하는 주요 화면을 고려하십시오. 화면 이동도 마찬가지입니다. 귀하의 아이디어를 표현하는 데 더 유용한 교대조를 선택해야 합니다. 참조를 위해 이 예를 확인하십시오.

시작점을 정의합니다. 여행의 출발점은 무엇입니까? 진입점, 즉 여정의 시작부터 시작할 수 있습니다(예: 사용자가 앱에 로그인할 때 보게 되는 것). 또는 중간 지점 또는 가장 흥미롭고/어렵고/중요한 화면이나 프로세스 단계에서 시작할 수 있습니다. 또는 사용자가 달성한 최종 결과로 끝에서 시작하고 사용자가 이 지점에 이르기까지 수행한 단계를 설명할 수 있습니다.

다음에 올 것을 결정하십시오. 시작 단계를 그린 후 다음 질문에 답하여 다음 단계를 결정합니다.

• 이 단계는 사용자를 어떤 방식으로 유도합니까?
• 그들이 어떤 길을 가기를 원하십니까?
• 그들은 거기에 도달하기 위해 무엇을해야합니까?

대체 경로, 항목을 스케치합니다. 사용자가 각 단계에 도달할 수 있는 다른 방법을 생각해 보세요.

• 사용자의 인터넷 연결이 실패하면 어떻게 됩니까?
• 그들은 어떤 다른 옵션을 가지고 있습니까?
• 사용자 또는 앱 오류의 경우 무엇이 잘못될 수 있습니까? 어떤 일이 발생합니까?
• 사용자가 이 단계에서 앱을 닫으면 어떻게 됩니까?
• 사용자는 다음에 앱을 시작할 때 어디에서 시작할까요?

대체 흐름에 대해 생각해 보세요. 히스토리를 분석하고 대체 흐름을 설계하고 스케치합니다.

주석, 메모, 세부 정보를 추가합니다. 불분명한 세부 사항을 명확히 하는 설명 요소를 추가합니다.

구하다. 스케치의 디지털 사본을 만드십시오.

공유하다. 스케치를 공유합니다(예: Evernote 또는 InVision을 통해).

필수 UX 흐름 스케치 팁 및 요령

먼저 와이어플로를 작성합니다. 꽤 긴 여정에 대해 생각하려면 필요한 공간을 이해하고 몇 가지 중요한 단계나 세부 사항을 놓치지 않기 위해 빠른 스케치를 만드는 것이 좋습니다. 나중에 종이 스케치에 추가하기가 어려울 것입니다.

너무 많은 세부 정보가 포함된 거대한 지도를 만들지 마십시오. 종이 스케치에는 실행 취소 버튼이 없으므로 변경하기가 어렵습니다. 세부 사항을 너무 정확하게 그리면 다른 상위 수준 변형 생성에서 상상력이 산만해질 수 있습니다. 전체 시스템을 설명하는 거대한 구성표를 만드는 대신 주요 스크립트에 집중하고 각 스크립트에 대해 개별 페이지를 전용으로 사용하려고 합니다.

불필요한 세부 사항을 잘라내고 다양한 detalization 수준을 결합합니다. 모든 상호 작용 설명을 그릴 필요는 없으므로 여정의 핵심 요소만 사용하도록 하세요. 거대한 상호 작용 맵을 그리는 동안 모든 단일 화면을 자세히 작업할 필요가 없습니다. 일부 화면은 여러 개의 사각형으로 표시될 수 있고 다른 주요 화면은 세부적으로 작업될 수 있습니다.

다른 용지 크기를 사용해 보십시오. 다른 용지 형식(A3 또는 A5)을 사용해 보십시오. 종이 시트 크기는 당신을 제한하고 다양한 방식으로 당신의 프로세스에 영향을 미칠 것입니다. 작은 종이 시트로는 많은 화면이나 세부 사항을 추가할 수 없지만 주요 아이디어에 집중하는 데 도움이 됩니다. 큰 종이 시트를 사용하여 하나의 거대한 여정, 많은 세부 사항 및 추가 메모를 그릴 수 있습니다. 또는 여러 개의 작은 여행을 배치할 수 있습니다.

포스트잇도 도움이 될 수 있습니다. 포스트잇을 사용해 볼 수도 있습니다. 별도의 화면이나 일부 각주를 그 위에 그리거나 스케치 요소의 추가 상태를 그릴 수 있습니다. 그들의 장점은 쉽게 교체할 수 있고 단순히 메모를 다른 곳으로 이동할 수도 있다는 것입니다. 예를 들어 흐름이 변경된 경우 포스트잇의 순서만 변경할 수 있습니다.

템플릿을 사용합니다. 템플릿을 사용해보십시오. 시간을 절약하고 클릭할 수 있는 고품질 프로토타입을 만들 수 있습니다.

화이트보드를 사용해 보세요. 화이트보드에는 여러 가지 장점이 있습니다. 가지가 많은 거대한 여정을 그릴 수 있어 더욱 인기를 끌고 있습니다. 많은 응용 프로그램 구성 요소를 종이에 그린 다음 자석을 사용하여 화이트보드에 부착하여 여정에 추가할 수 있습니다.

그림자를 스케치합니다. 그림자는 중요한 요소를 표시하는 데 도움이 되며 스케치에 시각적 매력을 더합니다. 세 가지 다른 유형의 그림자를 사용합니다.

• 빛의 방향을 따라가는 선 - 이것이 항상 아름답게 보이는 것은 아니지만 눈금을 사용하여 다른 "높이"까지 물체를 선택할 수 있습니다.
• 어두운 색으로 일부 부분 외곽선 표시(하단 또는 하단 및 오른쪽만)
• Pro-marker 사용(또는 그리기에 사용하는 앱에서 이에 상응하는 기능)

도면 구성 요소. “나는 그림을 잘 못 그립니다.” 와 같은 반대가 당신의 주도권을 억누를 수 있습니다. 실제로는 소리보다 쉽습니다. 가장 복잡한 스케치도 일반적으로 이 예와 같이 여러 기본 블록으로 구성됩니다. 점, 선, 삼각형, 정사각형 및 원을 그릴 수 있다면 스케치를 위해 무엇이든 그리는 데 필요한 필수 구성 요소가 있는 것입니다.

함께 모아서. 기본 요소, 버튼, 라디오 버튼, 드롭다운은 기본 요소로 구성됩니다. 이러한 요소를 그리는 방법을 배운 후에는 이를 결합하여 복잡한 블록과 구성 요소를 그릴 수 있습니다.

마무리

이 게시물의 목표는 UX 스케치 또는 일반적으로 스케치에 대한 궁극적인 만능 가이드를 만드는 것이 아니었습니다. 디자이너는 요구 사항과 개인 취향이 다르기 때문입니다.

보시다시피, 이것은 다룰 것이 많습니다 . 디자이너는 UX 스케치를 생성하기 위해 수많은 도구, 기술 및 접근 방식을 사용하며 이는 다소 주관적입니다. 특정 기술은 다른 프로젝트에서 일하는 다른 사람들에게 효과가 있을 수도 있고 그렇지 않을 수도 있습니다. 이제 막 시작했다면 확실히 실험해야 합니다. 끊임없는 연습과 실험은 당신에게 맞는 것을 찾는 데 도움이 될 것입니다.

프로젝트와 디자인 접근 방식에 가장 적합한 팁과 기술을 선택하는 것은 사용자의 몫입니다. 동료 UXer를 위한 추가 스케치 팁이 있습니까? 댓글 섹션에서 자유롭게 공유하세요.

• • •

Toptal Design 블로그에 대한 추가 정보:

• 전자 상거래 UX – 모범 사례 개요(인포그래픽 포함)
• 제품 디자인에서 인간 중심 디자인의 중요성
• 최고의 UX 디자이너 포트폴리오 – 영감을 주는 사례 연구 및 사례
• 모바일 인터페이스에 대한 경험적 원리
• 예측적 디자인: 마법 같은 사용자 경험을 만드는 방법