[내배캠] 실시간 수업 - 기획안 작성 (2) 와이어프레임 기획
오늘은 실시간 수업에서 와이어프레임에 대한 내용을 알려주셨다.
디자인을 배울때 와이어프레임을 제작해보고
프로토타입까지 걸어본 경험이 있는데
PM도 와이어프레임을 그리는 경우가 있다니
신기하군,,,
기획적인 측면에서 와이어프레임을 그릴때
주의해야할 점과 고려해야할 점을 알게되서
내가 디자인을 하더라도 도움이 되는 수업내용이었다.
와이어프레임을 PM이 그리는 경우도 있고
디자이너가 그리는 경우도 있어 회사마다 다르다.
PM으로서 와이어프레임을 그린다면
1차로 그려보고 디자이너와 개발자와 이야기 후
좀 더 디벨롭 하는 방향으로 진행하기도 한다.
그나저나 나 내일 자격증 시험인데 ㅠㅜ
제발 합격해서 빨리 학점은행제를 끝내고 싶다 ...
나 자신 파이팅이닷!
와이어프레임?
웹 사이트의 골격이나 애플리케이션의 사용자 인터페이스 및 핵심 기능을 나타내는 단순한 선과
도형으로 구성된 다이어그램
PM이 와이어프레임을 그리는 이유?
1) 그리는 과정에 기획이 구체화
그리는 과정에서 사용자의 UX 흐름뿐 아니라, 백앤드 구조, API 조건, 데이터 흐름까지 고려하게 됨
2) 팀의 커뮤니케이션
와이어프레임은 설득의 도구이다.
와이어프레임 설계 시 주의점
1) 예쁜 디자인보다, '정보구조와 흐름' 중심이 더 중요하다.
2) 한번에 완벽하게 하려고 하지말고 빨리그리고 보면서 고치기가 훨씬 중요하다
3) 기능을 나열하는 것이 아닌 행동을 설계하는 것, 모든 요소에 기획의도가 있어야함
와이어프레임 설계 단계
1) 화면의 목적을 정의한다.
사용자가 여기서 어떤 행동을 하길 바라지? -> 목표 행동을 정의하자
목표행동에 오기까지의 핵심 유저 플로우 짜기
2) 도출되어야 할 정보를 전부 나열
->관련있는 정보끼리 묶고 , 우선순위에 따라서 배치
사용자에게 보여줘야할 정보를 모두 나열해보자
3) 레이아웃을 설계한다.
우선순위에 따라 레이아웃 구조 결정
사용자가 한번만 보면 될것 VS 계속 봐야할것을 나눠서 배치
- 한번만 보면 될 건 위쪽 OR 처음 진입시 (메뉴)
- 계속 참고해야할 건 고정 OR 반복노출 (구매버튼)
첫 화면 (스크롤 이전) 에 보여지는 정보가 뭔지 생각하기
사용자 행동의 순서에 따라서 레이아웃 구조 결정
이 정보를 보면 다음행동이 가능해지게 배치하기
사용자의 시선 흐름을 고려하기
- 모바일은 Z패턴
- 리스트/텍스트는 F패턴
클릭/ 입력 항목을 배치할 땐, 손가락 도달범위 (Thumb Zone) + 입력최소화 !
- 보는 정보와 클릭/입력 항목을 분리
- 주요 CTC 는 오른손 엄지 기준 도달 영역에 배치
- 이탈 방지를 위해 입력 / 클릭은 최소화 + 자동입력 / 이전정보 활용
- 클릭 / 입력 에서는 무조건 사용자가 실수 할 케이스를 고려하기
4) 다양한 케이스를 고려하여 와이어프레임 추가하기
케이스별로 다른 와이어프레임을 그린다
