[UX/UI 아티클] 4. 사이트 흐름 vs 사용자 흐름 : 사용 시기

[UX/UI 아티클]

4. 사이트 흐름 vs 사용자 흐름 : 사용 시기

 

웹 사이트의 사용자 경험을 디자인하려면 각 페이지에서 어떤 일을 일어나는지 파악해야 한다. 또한 해당 페이지가 어떻게 연결되는지  파악해야 한다. 페이지 흐름을 계획하지 않으면 디자인을 시작할 때 문제가 생길 수 있다. 

 

문제의 예시

• 사이트 프로세스 중 어떤 페이지를 디자인하는것을 잊음

• 특정한 페이지를 서로 연결하는 콜 투 애션(call-to-action) 디자인(설계)를 잊음

• 사이트 계층에서 특정 페이지가 어디에 속하는지 알 수 없음

• 어떤 페이지를 서로 연결해야 하는지 알 수 없음

• 사용자가 작업을 완료하기 위해 탐색해야 할 페이지를 알 수 없음

이러한 문제를 경험한 적이 있다면 사이트나 사용자 흐름을 만들었어야 한다. 그렇게 하는 것이 당신이 이러한 문제를 해결하는데 도움을 주거나 피할 수 있다. 하지만 사이트나 사용자흐름을 이용하기 위해서는 먼저 그것들이 어떻게 다른지 이해해야 한다. 

 

ㅣ 사이트 흐름과 사용자 흐름은 같지 않다. 

 

많은 기획자와 디자이너들이 사이트 흐름을 사용자 흐름과 혼동하고 그 반대로도 사용한다. 두 가지 모두 페이지 흐름을 설명하지만 다른 수준과 목적으로 사용된다. 

 

사이트 흐름은 그 지역의 지도를 보는 것과 같다. 지도는 모든 것에 대한 조감도를 보여주며, 어디로 갈 수 있는지 일반적인 방향을 알려준다. 이 높은 수준의 뷰를 통해 사이트의 크기와 복잡성을 느낄 수 있다. 

 

 

사용자 흐름은 A 지점에서 B지점까지의 찾아 가는 법을 보는 것과 같다. 어느 길을 택해야 하는지, 어디서 방향을 틀어야 하는지, 어디까지 가야하는지 알 수 있다. 이 세부 사항들은 당신이 효율적으로 목적지에 도착하는데 도움을 준다. 이 낮은 수준의 지도 보기는 목적지까지 가는데 얼마나 많은 시간과 노력이 필요한지 느끼게 해준다. 

ㅣ 사이트 흐름 사용 시기

 

와이어프레임 작성을 시작하기 전 사이트에서 어떤 페이지로 이동하는지 아는 것이 중요하다. 그 후에는 어떤 페이지가 서로 연결되어야 하는지 알 필요가 있다. 이를 통해 올바른 사이트 페이지 흐름으로 사용자를 유도하는(call-to-action)을 설계할 수 있다. 

 

사이트 흐름은 내비게이션 계층(navigational hierarchy)의 구조를 명확하게 그림으로 제공한다. 당신은 내비게이션의 폭과 깊이를 엿볼 수 있다. 탐색(navigational)구조가 너무 깊어지면 간소화 할 수 있다. 탐색(navigational)경로가 너무 넓어지면 관련 페이지를 병합 할 수 있다. 이 모든 것이 더 간단한 탐색(navigational)환경을 설계(디자인)하는데 도움을 된다. 

다른 구성원도 사이트 흐름으로부터 헤택을 누릴 수 있다. 개발자들은 종종 코드를 추가할 때 어떤 페이지가 서로 연결되는지 알아야 한다. 사이트 흐름을 안내하여 링크가 잘못되거나 누락되는 것을 방지한다. 

 

이것은 또한 개발자들에게 한 페이지에서 마이크로인터렉션(microinteractions)이 어떻게 진행되는지 알려주는 효과적인 방법이다. 마이크로인터렉션(microinteractions)은 종종 더 무거운 코딩과 기능성을 수반한다. 이를 통해 미리 계획하고 해당 요구를 충족시킬수 있는 방법을 찾을 수 있도록 한다.

 

ㅣ 사용자 흐름 사용 시기

 

모든 작업이 직접적이며 간단한 경로는 아니다. 어떤 것은 우여곡절이 있을 것이다. 이런 종류의 페이지 흐름은 더 복잡하여 정리할 필요가 있다. 사용자 흐름은 이러한 작업의 효율성을 분석하는 데 적합한다. 

 

예를 들어, 잊어버린 비밀번호를 재설정하려면 페이지를 클릭하는 것 이상의 작업이 필요하다. 사용자는 피드백을 확인하고 양식 필드에 입력한 후 이메일을 확인해야 한다. 사용자 흐름은 작업의 모든 측면을 검사하여 더 빠르고 쉽게 만들 수 있도록 한다. 

 

사용자 흐름은 또한 시스템이 사용자 행동과 어떻게 상호작하는지 개발자들에게 이해하는데 도움을 준다. 오류가 발생하여 조치를 취할때 시스템은 사용자에게 응답할 필요가 있다. 개발자는 사용자 흐름에서 모든 상호작용을 자세하고 적절하게하게 볼 수 있다. 

 

ㅣ 더 빠른 흐름(flows) 생성을 위한 툴킷

 

흐름(flows)을 만드는 데 많은 시간을 소비해서는 안된다. 디자인을 시작하는데 도움이 될것이지만, 디자인 시작을 방해해서는 안된다. 그래서 플로우 패턴 같은 툴킷이 필요하다. 미리 디자인한 다양한 플로우 페이지가 있어 사용자가 정렬하고 사용자가 지정할 수 있다. 흐름(flows)을 빠르게 생성하는데 도움이 되는 마이크로인터렉션(microinteractions), 마커(markers), 쿨아웃(callouts)이 제공된다.

 

플로우 패턴

https://uxmovement.com/products/flow-patterns-make-site-flows-in-fine-visual-detail/ 

Flow Patterns: Make Site Flows in Fine Visual Detail

 

ㅣ모든 사람을 위한 흐름(flows)

 

흐름(flows)은 단지 디자이너들만을 위한 것이 아니다. 팀의 모든 사람과 사이트 비전을 공유하기 위한 방법이다. 모든 사람이 지도를 가지고 있을 때, 그들은 자신이 어디로 가고 있는지 더 편안하게 느낄 것이다. 

 

사용자는 또한 흐름(flows)에서도 이점을 얻을 수 있다. 당신이 시간을 들여 계획했기 때문에 그들은 더 나은 탐색(navigation) 및 페이지 흐름 환경을 경험할 수 있다. 

 

사이트 및 사용자 흐름은 구조적(architectural) 수준에서 사용자 경험에 영향을 미칠 수 있다. 당신이 사이트및 사용자흐름을 디자인 과정의 필수 부분으로 만들면 모든 사람이 혜택을 누릴 수 있다. 

 

 

ㅣ 원문 참고

https://uxmovement.com/wireframes/site-flows-vs-user-flows-when-to-use-which/

Site Flows vs. User Flows: When to Use Which

 

ㅣ 내 생각

 

이 글은 2015년에 씌여진 글임에도 불구하고 사용자 흐름과 사이트 흐름에 관해서 아주 잘 정리된 글이라고 생각이 된다. 내가 이 글을 더 빨리 발견했더라면 더 빠르게 사용자 흐름과 사이트 흐름에 관해서 개념을 잡고 웹기획을 진행하는데 있어서 더 잘 했을지 않을까라는 생각도 든다. 

나는 개인적으로 잘 만들어진 사이트 흐름이 좋은 사용자 흐름으로 이어진다고 생각한다. 그래서 사이트 흐름을 만드는데 꽤 많은 시간을 투여하고 있다. 하지만 단순히 나열식에 불과한 사이트 흐름도를 만들고 있어 이 흐름도를 통해서 우리팀의 구성원들이 얼만큼 혜택을 보았는지 모르겠다. 아마도 그냥 나를 위한 흐름도였던거 같다라는 생각이 이 글을 보고 깨달게 되었다. 그리고 사용자 흐름에도 얼마나 훌륭한 영향을 미쳤을지도 의문이 들었다.

오랜만에 너무 훌륭한 아티클을 발견하였고, 앞으로 내가 IA(information architecture)를 구성하는데 있어서도 이 사이트 흐름을 활용해서 짠다면 좋겠다라는 생각이 들었다. 

 

사이트의 기본은 얼마나 이쁜 디자인의 사이트를 만드는 것이 아니라, 얼마나 고객을 위한 사이트 흐름과 사용자 흐름으로 구성되어져 있느냐라는 사실을 오늘 이 아티클을 통해서 다시 한번 더 깨달게 된다.

 

이 글은 허접하지만 번역기를 이용하여 영문 아티클을 번역한 글입니다.