[WIL]피그마 IA/Flow chart(플로우차트)/Wire frame(와이어프레임)(수정중)

IA(Information Architecture)

사용자가 원하는 정보를 쉽게 찾고 이해할 수 있도록 콘텐츠를 구조화하고 조직화하는 과정(사이트맵)

 

필수 정보

1) 메인 카테고리 - 머리 /몸통= 서비스, 제품 주요 섹션 및 최상위 메뉴 항목

2) 서브 카테고리 -  메인 카테고리를 세분화 해 서브 카테고리로 구분 = 메인카테고리 아래 하위분류 및 상세 콘텐츠

3) 댑스 - 3~4단계 댑스 설정(복잡성 증가 = 사용성 저하) = 하위 분류 및 상세 콘텐츠 항목 등에 따른 구조도 깊이

 

리서치 -> wire frame 단계로 넘어가기 전에 Information Architecture가 만들어져 있다면 결과물이 나왔을 때 사용자 입장에서도 쉽게 사용할 수 있는 제품으로 다가갈 수 있고 팀내부적으로도 팀 사람들끼리 쉽게 제품을 만들 수 있는 도움을 줌

 

 

Flow chart(플로우차트)

작업, 프로세스 단계별 시각적으로 표현한 다이어그램, 각 단계 흐름과 의사결정을 이해하기 쉽게 보여준다.

 

필수 정보

1) 시작과 종료 지점 : 프로세스 시작, 끝 명확히 하기(제품의 end-to-end 커버하는 것이 중요_

2) 프로세스 단계 : 작업 및 활동의 각 단계를 도형으로 나타내기

3) 흐름선과 흐름방향 : 단계 간 순서, 흐름을 흐름선(화살표)로 나타내기

 

 

*체크리스트*

• 시작지점, 끝지점 명확히 표기했는가?
• 처리후 어디로 연결되는지에 대한 언급 명확히 기재 했는가?
• 해당 프로세스 혹은 시스템 포함되지 않은 항목을 넣지는 않았는가?
• 판단 도형시 Yes, No 명확히 표기했는가?

 

왜 User Flow 를 사용해?

1) 직관적인 사용자 흐름, 인터페이스를 위해

전반적인 사용자 흐름을 보면 어떤 부분이 유저의 시간을 낭비하게 하는지, 불편하게 하는지 눈에 보임

(이때 사용자흐름은 심플하게 만드는 것이 중요)

 

2) 프로덕트 전체 그림을 이해하기 위해

IA 를 보면 이름만 나열만 해놔서 디자이너는 어떤부분을 디자인 해야하는지 감은 잡는데  각메뉴가 구체적으로 어떤 역할을 하는지 IA만 봐서는 모른다. 어떤 기능이 있는지 과정 별로 보여주는데 간단한 도양으로 설명하고 이해 시키기 위해 도움을 줌

 

3) 협업을 효율적으로 하기 위해

테크닉적으로 문제가 있는지, 구현가능한지 시스템상에서는 어떤식으로 작용하는지 디자이너 입장에서 모를 경우가 많은데 유저 플로우를 통해 엔지니어가 피드백을 줄 수 있고,  에러 경우나는 경우도 알려주고 엣지케이스에 대해서도 피드백을 줘서 플로우 수정도 가능. 어떤 기능이 빠졌는지 어떤단계에서 적합한게 들어갔는지도 알 수 있다.

디자이너는 어떤 인터페이스 디자인이 이뤄져야하고 하는 것이 스크린 디자인이 필요한지 유저플로우로 도움을 받는다.

 

흐름 차트유형

1) Task Flows(작업 흐름)

심플한, 일반적인 단계 표현할 때 사용.유저가 취하는 일반적인 액션만 나타남.

 

2) Wire Flows(와이어 흐름)(Low fidelity wire frame)

와이퍼프레임 + 사용자 흐름차트

각 스탭별, 각 스크린별로 어떤 레이아웃과 디자인이 들어갈지 전달하기 좋음

이 단계에서는 시스템에서 어떻게 돌아가는지 다양한 경우의 수를 보여주는 것은 조금 한계가 있음. 

(유저 액션과 스크린 레이아웃 표함/ 해피 케이스만 다룸(시스템 액션X))

 

3) User Flows(사용자 흐름)

유저 액션, 시스템 액션 포함해서 도형으로 표현

(유저액션, 시스템 액션 둘다 커버 가능)

 

언제 어떻게 사용자 흐름을 작업하나?

1) 인포메이션 아키텍쳐처럼 초기 단계에서 이루어져야함 리서치 하고난 다음 디자인 초기단계에서 이루어짐 프로덕트 디자인, 개발 할때 기본 바탕이 되는 부분

 

2) 리서치 팀 유저가 원하는게 뭔지, 필요한게 뭔지 파악하고 만들어진 페르소나 프로필 가지고 영감을 얻어 시나리오를 만들어

user flow : end to end taks flow 작성 end to end flow 를 세분화 작업 메뉴별로 (기능별로)

flow 를 만들기 위해 PM에게 기능 리스트업, use case 달라고 함 문서보면서 flow 를 짬

 

3) 디자이너가 만든 user flow를 보고 엔지니어가 유저 플로우 보고 시스템 스트럭쳐 준비,  디자이너는 Low fidelity wire frame 만듦

 

Wire frame(와이어프레임)

프로젝트를 진행 할 때 기획 단계에서 작성되는 설계도

 

필수정보

1) 화면에 어떤 정보가 나타나야 하는가?

2) 어떤 레이아웃을 가져야 하는가?

3) 어떤 세부 모습이 나타나야 하는가?

4) 어느부분과 이어지며 어디로 이어져야 하는가?

5) 네비게이션은 적절히 기능하는가?

 

=> 모든 정보, 세부사항이 어떻게 연결되는지 + 정보체계가 적절히 선택, 이용되고 있는지 확인 할 수 있어야 함.

 

ex) 비밀번호를 찾는 시나리오

비밀번호 찾는 화면 -> 비밀번호 변경 링크 발송 -> 이메일에서 링크를 클릭 -> 변경화면 -> 변경완료 ->완료 시 이동 할 화면

 

1. 간단한 구조 회원가입에 대한 와이어프레임 초안

 

 

 

에드워드 드 보노의 6가지 생각모자 기법

수평적 사고 방식의 창의적 사고 기법의 일종

특정 주제 회의 할때 서로 다른 관점에서 동시에 논의하지 않고 한번에 한가지 사고 유형으로 사고하기 때문에 빠른시간 내에 다각적으로 평가해 문제 해결 방안을 도출 해 낼 수 있다.

 

1) 자리에 있는 참여자들은 파랑모자를 쓰고 있는 리더 지시 및 진행에 따른다.

2) 발언순서 리더의 진행에 따라야 하지만 대체로 흰 -> 빨 -> 검 -> 노 -> 녹 -> 파(or 흰->녹->노->검->빨->파) 의 순서로 진행되며 리더의 별도 지시없이 끼어들거나 반박 할 수 없음

3) 리더는 다양한 의사결정 프로세스를 반영 할 수 있도록 전 과정과 달리 관리, 조절해야한다.

 

현업에서는 IA, Flow chart, Wire frame을 커뮤니케이션을 하기위한 추가적인 도구이기 때문에 어떤것을 먼저 쓰거나 어떤 것을 꼭 써야하는 정답은 없다. 순서보다는 논리 흐름 .
ex) 기능요구서에서 로그인/ 회원가입 이것을 구체화해서 뜯어서 말을 반복하는 것은 효율적이지 않기 때문에 굳이 user flow 를 사용하지 않는다.

 

출처:

https://brunch.co.kr/@second-space/27

UX의 기본, 와이어프레임은 어떻게 작성하는 것일까

https://www.youtube.com/watch?v=gZdQAAfetGI

https://www.youtube.com/watch?v=TwnJMTK4adc