사용자 흐름은 새로운 와이어프레임입니다. (User flow is the new wireframe)

이 글은 Alexander Handley User flow is the new wireframe 글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다

사용자 흐름의 다양한 '해결책'과 사용 시기에 대한 삽화 가이드입니다.


사용자 흐름이 와이어프레임과 어떤 관계가 있습니까? 잠깐 ... 다양한 유형의 사용자 흐름이 있습니까? 내 친애하는 독자를 계속 ...
  • 제가 극적으로 될 것인가? (예).
  • 저는 아마 편견을 가지고 있습니다.
하지만 여러분 앞에 정보적이고 독단적인 글이 있는데, 이 글이 여러분의 디자이너 도구-벨트에 도구를 더해줄 것인가? 물론입니다.

Contents
  1. 사용자 흐름에 대한 빠른 정의
  2. 와이어프레임의 역할은? - 와이어프레임이 사용자 흐름과 무슨 관계가 있는가?
  3. 사용자 흐름에 대한 다양한 '해결책'은?
  4. FAQ: 자주 기대되는 질문 - a cool gif
그리고 만약 이것이 당신을 끝까지 읽게 하기 위해 유혹하지 않을 것입니다. 제가 지킬 것을 약속하는 저의 콘텐츠의 코드(Code of Content)가 있습니다. ✋
presentation


1. 사용자 흐름에 대한 빠른 정의

무엇보다도, 초보자를 위한 빠른 정의:
사용자 흐름은 사용자가 의미 있는 목표를 달성하기 위해 취하는 일련의 단계들이다.
다른 글에서 저는 그 주제에 대해 썼습니다.
이 글에서는 사용자 흐름의 증가가 와이어프레임과 같은 제품 팀(product teams)에게 어떤 영향을 미치는지 알아보려고 합니다.
어쨌든 와이어프레임의 좋은 점은 무엇인가?

2. 와이어프레임의 역할은?

presentation
와이어프레임은 디자인 기록에 남을 위대한 발명품이었습니다. 저의 와이어프레임 사용법은 로우 파이 모형 (low-fi mockup), 블록 프레임 (blockframes), 인터페이스모노 (interfacemonos) 및 와이어 (그 중 하나는 구성되어 있음)를 포함합니다.
여기에 폭넓은 붓질로 그림을 그릴 것입니다.
presentation
My go-to sketch tool


1. 더 빠른 반복

와이어프레임은 디자이너와 비 디자이너가 아이디어를 더 빠르게 반복 할 수 있는 방법을 제공합니다. emojis에서 설명한 대로 :
presentation

2. 더 나은 의사소통

저는 와이어프레임이 우리에게 디자인 자체에 대한 토론을 유지할 수 있는 방법을 제공하는 것을 좋아합니다. 선명한 픽셀 단위의 완벽한 인터페이스가 필요하지 않습니다.
와이어프레임을 사용할 경우 프로세스는 다음과 같은 상황에서 전환되었습니다.
안녕하세요 개발자! 내가 PowerPoint에서 만든 목업과 똑같은 코드를 작성해야 합니다. - 열망하는 창업자
자세한 내용은 다음을 참조하십시오.
인터페이스가 어떻게 보일 수 있는지 먼저 몇 명의 사용자들 앞에 놓도록 합시다.
속독자들를 위한 인포그래픽 :
presentation
Check out Jon Moore’s great article on Blockframes
저는 와이어프레임이나 시제품 제작 따윈 안 할 겁니다! 당신은 uxdesign.cc를 팔로우 해야 합니다. 종교적으로 🙏 그들은 그 주제를 더 잘 다룰 것입니다.

- 와이어프레임이 사용자 흐름과 무슨 관계가 있는가?

그들은 공통점이 많습니다! 그들은 둘 다 다른 수준의 '해상도'와 완제품의 충실도를 가지고 있습니다. 프로젝트에서 적시에 사용하면 둘 다 할 수 있습니다.
  • 반복 속도를 높입니다.
  • 제품 팀 전반의 커뮤니케이션 개선
사용자 흐름의 다양한 '해결 방법'을 살펴보겠습니다.

사용자 흐름에 대한 다양한 '해결책'은?

presentation
1. User goals (sorry recruiters 🙃)
이것은 사용자 흐름이 아닙니다! 저도 알아요. 하지만 확실한 한 시작입니다. 당신이 설계 중인 흐름의 정의는 사이트 맵 또는 프로세스 맵을 분리하는 것입니다.
저는 사용자와 그들의 목표를 정의하는 것을 좋아하지만, 당신은 요구 사항, 이야기, 사용자 여정의 단계 또는 step on their quest to Mordor를 사용할 수 있습니다. 끌 수 있는 카드(little draggable card)에 딱 맞는 거 있죠~? 🙃

presentation
2. Task flow (can you keep focus on just one flow?)
당신의 사용자를 흐름의 ⭐️로 만드십시오. 그들이 각 단계에서 무엇을 할 것인지 묘사하십시오. 시작하는 좋은 방법은 사용자가 작업을 완료하거나 목표/요구 사항을 충족하기 위해 각 단계에서 수행해야 할 작업을 작성하는 것입니다.
개인적으로, 저는 각 단계에서 사용자의 원하는 정서적인 상태를 포함시키는 것이 도움이 되지 않습니다 ... 저는 당신이 "청구 설정 업데이트(Update Billing Settings)"를 하는 동안 당신이 😃 🤔 🐶 또는 😠이라는 것을 의미합니다.

presentation
*When in UX doubt refer to Neilson Norman Group for a definition
와이어플로우(또는 시각적 사용자 흐름) 단계는 흐름에 대한 다음 단계의 약속입니다. 이 단계에서는 사용자가 응시/사용할 디지털 정보(화면, 메시지, 원하지 않는 로비 광고 디스플레이 등)를 추가할 수 있습니다.
우리의 친구인 와이어프레임은 여기서 잘 작동합니다. 화면이 아닌 대화 흐름을 유지하십시오.

presentation
Like hi-fi designs, high-fidelity user flows are used in the implementation stages of a design. It helps a lot, but takes work.
이 단계의 목표는 사용자와 개발자가 이해할 수있는 사용자 흐름입니다. 그렇지 않으면 아무도 이해할 수 없는 솔루션이 생깁니다.
와이어프레임에서 이 단계를 수행하려면 흐름을 생성하는 데 필요한 모든 정보를 고려해야 합니다.
🤔 사물이 '행복의 길'을 따르지 않으면 어떻게 됩니까?
🤔 대체 경로로 가는 논리 또는 케이스는 무엇입니까?
🤔 이동 중인 데이터가 있습니까? (그리고 실수로 😉 광고를 통해 인터넷 사용자를 추적하는 데 실수로 사용하고 있습니다.)
🤔 인터페이스에 상태 변경 사항이 있으십니까? 무엇이 그들을 자극했는가?

이제 모두 함께 너무 길어서 읽지 않은 사람들을 위해!

presentation


FAQ: 자주 기대되는 질문

만약 내가 네 질문을 하지 않았다면, 아래에서 언급해라!

이 값을 현재 [____] UI 프로세스에 추가하는 방법, UX[____] [____]쿼드런트에 맞는 설계, 그리고 개발팀이 지라를 위해 구성한 [____]의 [____]맛으로 여전히 작업하나? [저도 잘 모르겠어요]

진정해. 사용자의 흐름을 반영하여 디자인을 전달하는 도구로 사용될 때 사용자 흐름이 가장 잘 작동한다고 생각합니다.

이것을 위해 어떤 도구를 사용할 수 있을까? 그들은 브랜드 양말을 가지고 있니?

아주 좋은 첫 번째 질문. 이 곳에는 견고한 툴이 많이 있습니다. Flowmappcombines sitemaps와 사용자 흐름, Overflow는 와이어 흐름을 재미있고 신속하게 만들고, Invision은 물론 자유롭게 생성하며, Marvel은 프로토타입에서 사용자 흐름을 생성하며, 로우 및 하이 레벨 사용자 흐름에 초점을 맞춘 홈 팀Primary로 외칩니다.
pen + paper 그리고 화이트보드도 잊지 마십시오!

여기까지 읽었는데 다시 일을 하고 싶지 않아. 이제 어쩌지?

시간 내주셔서 감사합니다.

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


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