＃학습/독서

[하루 5분 UX] 요약 | 9장 와이어프레임과 프로토타입

행복할만큼 2022. 10. 1. 23:03

57. 와이어프레임이란?

  • 설계도. 기술문서.
    • 모든 이해관계자와 협의, 합의가 된 상태여야 함
  • 기술지침서.
    • 구현을 해야하는 다른 개발자, 디자이너가 충분히 이해하고 사용할 수 없는 상태라면 더 작업하라.

58. 와이어프레임이 아닌 것은

  • 와이어프레임은 기본 스케치가 아니다
    • 디자인만 배제한 것이고, 어떻게 작동할지를 보여줘야 한다
    • 초기 콘셉트와 생각은 아이디어이다. 글과 사진으로 보여준다
  • 좋은 와이어프레임은 시간이 걸린다
    • 모든 링크와 버튼, 페이지는 사용자와 목표를 위해 필요한 곳에 배치되어야 함
    • 각 요소들의 용도가 무엇인지 충분한 설명을 작성한다
  • 와이어프레임은 과정으로 존재하지 않는다
    • 와이어프레임이 완성되지 않았다면 문제가 풀리지 않았거나, 체계화되지 않았거나, 작동하지 않거나, 사용하기 어렵거나, 무언가 빠졌다는 의미이다
    • 와이어프레임 작업 중이라면 다음 단계 (디자인, 개발) 를 시작해선 안된다
  • 와이어프레임은 기술적인 목적을 충족하기 위해 작성하는 것이다
    • 보여주기 위한 것이 아니다
    • 고객/동료/상사에게 잘보이려고 예쁘게 만드는 데에 집중하지 않는다

59. 툴이 아닌 기술을 배워라

  • 쉽고 저렴하고 단순한 툴을 선택한다
  • 당신이 필요한 솔루션에 기반한 디자인을 해야한다
    • 원하는 것을 먼저 그려보거나 디자인해보고, 그것을 기술적 문서로 옮겨줄 툴을 선택한다
    • 툴을 켜놓고 그에 맞춰 문제를 풀면 안된다
    • 툴로 인해 디자인에 제약이 발생하면 안된다

60. 다양한 상황을 고려하라

  • 엣지 케이스, 예외 상황, 예외적인 사용자를 고려해야한다
  • 텍스트가 짧다면? or 텍스트가 길다면
  • 아무것도 존재하지 않는다면? (None 값이라면?)
  • 누군가가 삭제했다면?
  • 최악의 시나리오는?
    • 사용자가 디자인을 가장 잘못된 방법으로 사용할 수 있는 경우를 방지하기 위해 기능을 제약 한다

61. 디자인 패턴

  • 많은 사람들이 사용하는 디자인, 유행하는 디자인이라고 해서 좋은 디자인은 아니다

62. 스캐닝 패턴 (Z-패턴, F-패턴, 시각적 계층)

  • Z-패턴
    • 사용자는 보통 Z패턴으로 왼쪽 상단부터 오른쪽 하단까지 훑음
    • Z패턴 근처에 있지 않은 내용은 관심을 끌지 않음
  • F-패턴
    • 왼쪽 상단 모서리에서 시작
    • 본문의 첫줄을 읽는다/스캔한다
    • 흥미로운 내용을 발견하기 전까지 왼쪽의 열을 따라 아래로 스캔한다
    • 흥미로운 내용을 좀 더 주의깊게 읽는다
    • 계속 아래로 스캔한다
  • 레이아웃에서 의도된 강한 부분과 약한 부분에 따라 시선 위치
  • 시각적 계층
    • 우리의 눈은 중요한 것에서 다른 중요한 것으로 건너뛰는 식으로 사물을 본다
    • 타이포그래피, 색상을 통해 시각적 무게감을 더하여 시각적 계층을 만들어 사람들이 재빨리 스캔할 수 있게 해준다

63. 페이지 프레임워크

  • 페이지마다 하나씩 만들지 않는다
  • 큰 부분을 먼저 하고 세밀한 부분을 나중에 채운다
    • 큰 부분 : 공통 영역
      • 내비게이션
        • 메인 메뉴 : 트래픽이 생긴 이후 클릭율에 따라 메뉴 순서, 우선순위 조정
        • 서브 메뉴
      • 푸터
        • 자주 이용하는 기능을 위치시키지 않는다
    • 세밀한 부분 : 콘텐츠 등

64. 폴드, 이미지, 헤드라인

  • 사용자가 스크롤하기 전에 관심을 끌 만한 것을 제공하라
  • 폴드 아래에도 내용이 있다는 것을 분명히 알려주어라
  • 감정이 드러나는 이미지를 사용해 사용자의 시선을 유도하라
  • 가장 중요한 내용 근처에 헤드라인을 배치하라

65. 인터랙션 축

  • 각 엣지는 인터랙션 축
  • 사람들의 시선은 인터랙션 축에 자연스럽게 닿게 되어 있음
  • 축에 가까울 수록 사용자의 눈에 쉽게 띔
    • 클릭을 유도하길 원하는 버튼이나 강조할 것이 있다면 인터랙션 축 위 or 근처에 위치시키기

66. 폼

  • 폼을 단순하고 간단하게 느껴지게 만든다
  • 연관된 질문을 한데 모아둔다
  • 진짜 필요한 사항만 질문한다
  • 필요한만큼 충분히 페이지를 사용한다
  • 양질의 답을 얻을 수 있는 입력 유형을 선택한다
    • 체크박스 : 2가지 이상의 옵션 선택 가능
    • 라디오버튼 : 1개의 옵션만 선택 가능
  • 라벨을 적절하게 사용하라
    • 입력해야할 내용을 알려줄 때 짧고 분명하며 읽기 쉬워야 한다
    • 입력창 가까이에 위치해야 한다
  • 오류를 방지하고, 오류케이스를 처리할 수 있도록 만든다
    • 입력 가능한 형식을 기능에 추가한다
    • 기대되는 정보를 입력할 수 있도록 예시를 보여준다
    • 입력할 때 사용자가 실수하거나 미입력이 있다면 수정할 수 있도록 알려준다. (인라인 에러 핸들링-검증할 수 있는 정보에 대해 사용.)
    • 다음/완료 버튼을 누를 때 오류나 미입력이 있는지 확인할 수 있도록 하고 왜/무엇이 틀렸는지 분명히 알 수 있도록 시각적으로 나타낸다
  • 속도 Vs 오류
    • 빨리 입력할 수 있도록 해야할 것에 대한 배치와, 생각을 하고 입력할 수 있도록 해야할 것에 대한 배치를 달리 한다

67. 주요 버튼과 보조 버튼

  • 주요행동 ⇒ 주요버튼
    • 실행/가입/구매/저장/공유 등 생산하는 행동
  • 보조행동 ⇒ 보조버튼
    • 취소/건너뛰기/재설정/거절 등 비생산적인 행동
  • 중요버튼
    • 계정삭제처럼 비생산적이지만 중요한 행동
    • 경고를 의미하는 디자인
  • 특수버튼
    • 강조할 서비스에 대해 패턴을 깨는 디자인을 적용하여 시선을 끌어당김

68. 적응형 디자인과 반응형 디자인

  • 적응형 : 디바이스별로 각각 디자인을 한 것을 정적으로 보여주는 것
  • 반응형 : 사용자가 접속한 디바이스별로 동적으로 조정되는 디자인

69. 새로할까 수정할까

  • 먼저 무엇이 문제인지, 무엇이 목표인지 밝혀야 한다
  • 가장 작은 것부터 바꾸기 시작해서 개선해나가야 한다
  • 기능을 추가하는 것이 좋은 것이 아니라, 무언가를 빼야 문제를 풀 수 있는 경우도 있다

70. 터치 vs 마우스

  • 마우스 : 섬세한 조작, 정확성이 요구되는 작업에 사용하기 좋음
  • 터치 : 촉각을 통해 피드백을 받을 수가 있음, 인터페이스에 직접 작용, 물리적인 특성이 적용됨. 멀티터치를 이용하거나 제스처를 사용 가능.