현재 가장 큰 WTF 디자인 (The biggest WTF in design right now) - “What’s the flow!”

이 글은 Alexander Handley의 The biggest WTF in design right now 글을 번역했습니다.

사용자 흐름(user flows)이란 무엇이며 왜 사용자 흐름을 사용해야 합니까? "WTF, 내가 보고 있는 것"에서부 터 앱의 작동 방식에 대한 명확한 디자인에 대해 설명된 가이드 입니다.

제 인생의 장기 목표는 사용자의 흐름(user flows)에 대한 정보를 전파하는 것입니다... (실제로는 아닙니다^^;), 저는 기술과 우리가 어떻게 소통하고 작동하는지에 대해 깊이 신경 쓰고 있습니다.
다른 디자이너들과 아이디어를 나누기 위해 사용하는 도구와 방법에 대해 생각하고 싶습니다.
우리의 전문 영역 밖에 있는 사람들과 우리의 전문 용어와 익숙한 도구에서 벗어난 사람들과 의사소통하는 방법에 대해 생각합니다. 이것이 제가 사용자의 흐름(user flows)을 신경 쓰는 이유이며, 저는 이것을 구축하고 있기 때문이기도 합니다.
presentation
이 글에서 우리는 디자인에서 큰 WTF를 훑어볼 것입니다 : "What 's the flow!". 사용자의 흐름을 파악하고 사용자의 기본 흐름을 살펴본 다음 몇 가지 예를 다룰 것입니다.

Contents:

  • WTF은 사용자 흐름(user flows)입니까? 🤷
  • WTF 내가 보고 있는 것은 무엇인가? 👀 ⁉️
  • 사용자 흐름(user flows)의 기본 사항 📖
  • 모든것을 예제와 함께 🔥
presentation

WTF은 사용자 흐름(user flows)입니까?

멋진 문장에서 사용자 흐름 (user flows)은 무엇입니까?
사용자 흐름(user flow)은 의미 있는 목표를 달성하기 위해 사용자가 취하는 일련의 단계입니다.
그리고 왜 그들은 사용됩니까?
앱이나 웹 사이트의 다양한 페이지와 작업을 통해 사용자의 의도된 흐름을 전달하는 데 사용됩니다.
좋아요, 그것들은 무엇으로 만들었습니까?
사용자 흐름에는 일반적으로 이름(name), 단계(steps), 사용자(users) 및 각 단계에서 일어나는 일에 대한 설명(description)이 포함됩니다.
그리고 이 인용문을 어디에서 가져왔을까요?
바로 Alex Handley, Primary Co-founder 에게서 가져왔습니다. 🙃
presentation
다른 사람들은 사용자 흐름(user flows)을 선택하고 자신의 정의를 제시했습니다. Overflow 및 Flowmapp와 같은 도구가 존재하여 사용자 흐름을 생성하는 데 도움이 됩니다. 베이스 캠프 (Basecamp)의 Ryan은 사용자 플로우 (UI 플로우라고 부르는 것)에 대한 매우 간단히 작성하도록 발명했습니다.
presentation
Nice and simple. Source here
(이제는 버킷 목록에서 "Medium 글의 OG Signal v. Noise 글 참조"를 건너뛸 수 있습니다.)
사용자 흐름(User flows)은 디지털 제품, 고객 경험, 웹 사이트 또는 앱을 분류하고 정의하는 또 다른 방법입니다.
사용자 흐름의 아름다운 점은 사용자 관점에서 "크로스 플랫폼 모바일 경험"과같이 복잡하고 추상적이며 기술적인 부분을 정의할 수 있다는 점입니다.
  • 기본적인 기술의 흐름이 아닙니다. ❌
  • 개발 방법론의 흐름이 아닙니다. ❌
  • 디자인의 흐름을 구현하는 사람이 아닙니다. ❌
  • 이것은 사용자의 흐름(user’s flow)입니다. 당신이 그들을 위해 디자인하고있습니다.
사용자 흐름에 대해 한가지 기억할 점은 흐름을 완료함으로써 사용자가 원하는 목표에 따라 사용자 흐름을 정의하는 것입니다.
예를 들어, 사용자 흐름 (User Flow)은 웹 사이트 방문자가 계정을 생성하거나, 화염 방사기를 주문하거나, 메일 링리스트에 가입하는 방법을 자세히 설명합니다.
다음은 사용자 흐름에 대한 표준의 예입니다 :
presentation
그리고 좀 더 흥미로운 것입니다 :
presentation

presentation

WTF 내가 보고 있는 것은 무엇인가? - what’s the flows

저는 올해도 열두 개 이상의 스타트업 기업을 돕고 도움을 받을 만큼 운이 좋습니다. 모든 대화에서 "WTF - what’s the flows"라고 생각하면 "무엇이 흐름인가"를 알 수 있습니다.
다음은 몇 가지 일반적인 대화의 재구성과 사용자 흐름의 필요성을 강조한 이유입니다.
presentation
Startup founder

presentation
Product designer. 나는 2.1GB Sketch파일을 포함하는 것을 잊었다.

presentation
Business Analyst AKA UX designer (실제로는 그렇지 않습니다. 어떻게 생각하십니까?)

presentation
좋아요, 이건 도움이 될 만한 예시가 아니에요. :)

presentation

기술은 놀라 울 정도로 자유롭습니다. 국제공항에서 H1N1처럼 자유롭습니다. 자유로운 팀은 색상과 면의 수가 점진적인 분할로 결정되는 러브릭 큐브의 다른 부분을 독립적으로 만듭니다.
presentation
신속한 변화를 위한 애자일(Agile) 코치님께, 모든 신속한 변화를 위한 원칙을 충분히 적용하지 못하거나 신속하게 대처하지 못하는 데서 기인한다는 의견을 자유롭게 말씀해 주십시오. 🙃 Alvaro Reyes 사진(악의는 없습니다.)
이 자유는 소프트웨어에서도 작동하지만 부작용이 있습니다. 저는 사용자 흐름(user flows)이 우리가 다양한 기술적인 의사소통을 할 때 "WTF 내가 보고 있는 것은 무엇인가" 문제에 대해 가장 좋은 해독제라고 생각합니다. 이러한 질문들은 사람들이 전문 용어가 없고 이해할 수 있는 질문에 집중할 수 있도록 도와줍니다.
  • What - 이것(앱 / 웹 사이트 / 제품 / 디지털 키오스크의 미래 고객 경험)의 목표는 무엇입니까?
  • Who - 누가 이것을 합니까?
  • How - 그리고 그들은 이것을 어떻게 합니까?
간단한 시스템을 통해 이러한(과도하게?) 아주 멋진 사용자 흐름을 만듭시다.
presentation

사용자 흐름의 기본 사항 📖

좋은 사용자 흐름을 구성하는 세 가지 기본사항이 있다고 생각합니다. 어떤 사람들은 다르게 생각하지만, 그들은 "자유 흐름"을 찬성하고 자유로운 형태, 무한한 스크롤을 지지하며, 자신만의 모험, 뱀, 사다리, 그리고 navbar flows를 선택합니다.
소프트웨어 프로젝트 폭발을 충분히 목격한 후, 저는 구조에 대해 엄격해졌습니다.

기본 1 : 사용자 흐름이 목적을 보여줍니다. 🏆

사용자 흐름에는 목적을 설명하는 이름이 있습니다. 즉, 단계를 완료하여 사용자가 달성 한 목표입니다. 사용자 흐름의 이름을 지정하는 것은 중요한 요소이며 종종 누락됩니다.
presentation
사용자의 목표에 따라 흐름의 이름을 지정하고 사용자가 누구인지 말하여 보너스 포인트를 얻으십시오.
presentation

기본 2. 사용자 흐름이 한 방향으로 이동 ➡️

한 방향을 고수하고 흐름의 결정 포인트를 제한함으로써 거대한 사이트 맵과 자유형 클릭 가능한 프로토 타입을 분리할 수 있습니다.
두 가지 모두 그 유용성이 있지만, 독특한 행동을 전달하기 위해 사용자 흐름이 가장 잘 작동합니다. (따라서 사용자 흐름 ≠ 사이트 맵 또는 고해상도 프로토 타입).
presentation
사용자 흐름에는 경로가 여러 개 있을 수 있지만 목표가 다르지 않은 상태만 표시합니다.
사용자 흐름이 작동하는 이유는 무엇입니까? 주된 이유는 그들이 이야기를 하는 것 같습니다. 우리의 뇌는 이야기와 관련된 사람들을 기억하도록 연결되어 있습니다.
"계정 만들기"사용자 흐름이 가장 흥미로운 이야기는 아니지만 독자는 흐름의 거대한지도 보다 훨씬 쉽게 기억할 수 있습니다. 그리고 "Ticket #678 : Asset 47 (직원이 아닌 계정) activation"보다 기술이 없는 사람들에게 더 쉽습니다.
presentation

기본 3. 사용자 흐름은 완전한 작업을 나타냅니다. ✅

앱(또는 디지털 제품)의 디자인을 체계적으로 유지하려면 각 사용자 흐름의 범위가 사용자의 단일 작업 또는 목표 여야 합니다.
사용자 흐름이 조각에 불과한 경우 사용자의 이야기를 전달할 수 있는 능력을 잃게 됩니다. 만약 그들이 너무 오랫동안 계속한다면 그들은 그들의 의미를 잃게 됩니다.
presentation
인터페이스 (와이어 프레임, 목업)가 있다면 그것을 보여주세요! 대체 경로가 있는 이유와 단계를 자세히 설명하십시오.
사용자 흐름은 디지털 프로젝트에서 생성된 모든 생산물 중에서 앱 또는 웹 사이트 설계의 명확한 모델이어야 합니다.
사용자 흐름의 설계 이유를 표시하는 데 필요한 모든 정보를 포함해야 합니다.
presentation

모든 것을 예제와 함께

이제 이러한 기본 사항을 실제로 적용해 보겠습니다.
1. 사용자 흐름이 목적을 보여줍니다. 🏆
presentation
이러한 사용자 흐름은 예쁠 수 있지만 모호함은 잠재적인 복잡성을 숨기고 충분한 정보를 뷰어에게 다시 전달하지 않습니다.

presentation
사용자 흐름의 이름을 지정하면 사용자 관점에서 설계하고 목표에 따라 흐름을 분할할 수 있습니다.
presentation
2. 사용자 흐름은 한 방향으로 이동합니다. ️️️➡️
presentation
이것은 좋은 사이트 맵 또는 내비게이션으로 작동합니다.

presentation
사용자 흐름을 고유한 흐름으로 분할하는 것이 좋습니다.
presentation

3. 사용자 흐름은 완전한 작업을 나타냅니다. ✅

presentation
Idk는 Pam이지만 그들은 많은 이메일을 받을 수 있습니다.
사용자의 흐름과 행동을 전달하는 데 도움이 되지 않는 세부 사항은 추가하지 마십시오.

presentation
이 예에서는 누구나 사용자 흐름을 읽고 이해할 수 있습니다.
presentation

모두 함께!

당신이 억만장자라고 가정해 봅시다. 그리고 엄청난 마케팅 및 PR 팀을 이용하여 roofing torches와 같은 새로운 제품으로 미친 아이디어에 자금을 투자하는 지루한 polymath와 만나기를 원합니까? WTF !? 저와 함께 말해봐요. what’s the flows?
presentation


이 글은 번역 글입니다. 원본 링크입니다.



presentation
안녕하세요! Early adopter입니다.
페이스북 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰" 또는 "페이스북"으로 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!
https://bit.ly/2L6WsZp