728x90
요즘 모바일 UX를 디자인 할 일이 많아져서 따로 공부하기 시작!
그 전에 알아두면 편한 UX 원칙과 권장사항
나중에 참고하면서 디자인하고, 나중에 체크리스트로 둬서 확인까지 하면
보다 사용자가 사용하기 편한 UX 디자인을 할 수 있지 않을까해서 정리!
UX의 원칙:
모바일 사용자는 일반적으로 멀티태스킹 또는 이동 중에 작은 화면에서 짧은 시간 내에 작업을 완료해야한다. 디자인은 이에 맞춰서 이뤄져야하며 사용자의 만족도를 높여야한다.
모바일 사이트의 사용자는 필요한 것을 쉽고 즉각적인 응답을 얻기 원한다는 것을 유의!
1.1 모바일 사이트 디자인 권장사항
: 데스크톱 홈페이지는 일반적으로 시작 페이지, 고객 문의처, 프로모션 공간의 역할을 모두 수행하지만 모바일 홈페이지는 표시되는 콘텐츠를 사용자에게 연결하는데 주력해야 함.
1) 클릭 유도문을 중심에 배치 (가장 눈에 띄는 곳)
- 사용자들은 메뉴 항목을 놓치기 쉬우므로 주요 클릭 유도문안을 항상 잘 보이는 곳에 배치
- 기본 클릭 유도문안이 사이트 본문에 명확히 표시
- 보조 작업은 메뉴나 스크롤해야 볼 수 있는 부분에 배치
2) 짧고 친절한 메뉴
- 카테고리가 구분된 간략한 메뉴를 제공하면 모바일 방문자의 탐색이 쉬워짐
- 데스크톱 사이트에서는 포괄적인 메뉴가 효과적일 수 있지만 모바일 사용자는 원하는 항목을 찾기 위해 긴 옵션 목록을 스크롤하는데 부담을 느끼므로 메뉴 항목을 최대한 줄이는 것이 좋음
3) 홈페이지로 쉽게 돌아갈 수 있도록 지원
- 로고를 홈페이지로 돌아가는 탐색 버튼으로 사용
4) 과도한 프로모션 자제
- 프로모션은 탐색을 방해해서는 안 되며 클릭 유도 문안과 확실히 구분되어야 한다.
- 대상자들이 선호했던 앱 프로모션은 대형 전면 광고가 아닌 쉽게 닫을 수 있는 배너
1.2 사이트 검색
1) 사이트 검색을 잘 보이는 곳에 배치
- 사이트 검색을 홈페이지 상단 주변에 빈 입력란으로 배치
- 검색은 사이트에서 모바일 사용자아게 가장 먼저 보이는 기능 중 하나로 포함되어야 한다.
2) 사이트 검색결과의 관련성 보장
- 사이트 검색으로 가장 유용한 결과부터 반환되도록 하고 자동 완성, 맞춤법 수정 등의 스마트 검색 기능을 구현
3) 필터를 구현하여 사이트 검색 사용성 개선
- 사용자가 원하는 정보를 더 정확히 검색할 수 있도록 필터 제공. 단, 필터로 인해 검색 결과가 0개가 되면 안 됨
4) 사이트 검색 결과를 개선하는 방법
- 세그먼트를 기준으로 검색 범위를 쉽게 좁힐 수 있는 경우 사전에 몇 가지 질문을 하면 방문자에게 유용한 결과 제시 할 수 있다
ex) 신발 매장에서 모바일 검색을 시작할 때 성별 및 신발 치수 선택하게
1.3 상거래 구매 단계
: 방문자에게 구매 단계 유도하는 방법
1) 구매를 결정하기 전에 충분히 탐색하도록 지원
- 방문자가 계정 등록 없이 사이트를 둘러볼 수 있게 한다.
2) 비회원 구매 허용
- 비회원으로 결제하는 옵션을 제공하고 실질적인 혜택으로 등록 유도
3) 기존 정보 활용으로 편의성 극대
- 이미 보유한 정보나 타사 결제 서비스를 활용하여 구매 단계를 최대한 쉽게 만든다
4) 복잡한 작업에 클릭 통화 버튼 사용
- 눈에 띄는 클릭 통화 버튼을 제공하면 사용자가 복잡한 정보를 제공해야 할 때 이탈하는 경우를 막을 수 있다 (복잡할 때 금융사랑 전화해서 해결하는 것을 선호함)
5) 다른 기기에서 쉽게 전환을 완료할 수 있도록 지원
- 구매를 나중으로 미룰 방법을 찾는 모바일 방문자도 있으므로 소셜 공유, 이메일 또는 장바구니 기능을 통해 다른 기기에서 구매 경로를 쉽게 이어갈 방법을 제공
1.4 양식 입력
1) 정보 입력 간소화
- 숫자를 입력해야 하는 입력란에는 숫자 패드를 제공하고, 정보를 입력하면 양식의 다음 입력칸으로 자동으로 진행되도록 해야 함
- 작은 양식 입력란을 반복하여 탭하고 휴대전화의 키보드를 숫자 모드로 전환해야 할 때는 불만을 가짐
2) 작업마다 가장 간단한 입력 방법 선택
- 모바일 양식의 입력 항목마다 전환 버튼 또는 드롭다운 메뉴가 가장 적절한지 여부를 고민하고 사용자가 탭하기 쉽도록 디자인
- 적은 수의 옵션 중에서 선택해야 하는 경우 커다란 전환 아이콘 탭하는 것이 쉬움
- 많은 수의 옵션 중 하나를 선택하는 경우에는 기존의 드롭다운 메뉴가 간편
3) 날짜 선택 시 시각적인 캘린더 제공
- 명확한 안내가 포함된 시각적인 캘린더로 날짜를 선택하도록 하여 방문자가 사이트에 머물도록 함
4) 라벨 표시 및 실시간 검증으로 양식 오류 최소화
- 입력할 정보를 선명하게 알려주는 라벨을 사용하고, 오류를 실시간으로 검증하여 양식을 제출하기 전에 문제점 알림
5) 효율적인 양식 디자인
- 양식의 입력란 개수를 최소화하고(반복되는 작업 없게) 정보를 최대한 자동 입력. 분명한 라벨이 표시된 진행률 표시줄을 사용해 여러 단계로 구성된 입력 과정을 안내
1.2.5 사용성 및 폼 팩터
: 사용자의 요구를 감안하여 전체 사이트를 디자인하는 방법
1) 모바일에 맞춘 전체 사이트 최적화
- 모든 페이지를 모바일에 맞게 디자인하면 사이트 이용이 쉬워짐
2) 화면을 확대할 필요가 없는 사이트
- 사이트에서 화면을 확대하다 보면 클릭 유도문안을 놓칠 수 있다. 확대할 필요가 없도록 사이트를 디자인
3) 확대 가능한 제품 이미지
- 제품 사진과 같은 주요 이미지로 고화질 클로즈업 이미지 사용
4) 효과적인 화면 방향 안내
- 특정 방향으로 보도록 디자인된 사이트라면 사용자에게 그 사실 안내. 단, 중요한 클릭 유도문안은 방향과 무관하게 작동
5) 단일 브라우저 창에 붙잡아두기
- 클릭 유도 문안을 이용해도 브라우저 창이 새로 열리지 않도록 하고, 사용자가 창을 전환할 필요가 없도록 하는 기능을 사이트에 추가
6) 전체 사이트 라벨 지양
- 사이트 경험을 쉽게 전환할 수 있도록 하되, '전체 사이트' 대신 '데스크톱' 같은 라벨을 사용하여 두 사이트 모두 전체 환경을 제공한다는 점 명확히 함
7) 사용자 위치가 필요한 이유 명시
- 사용자 위치가 왜 필요하고 이 정보가 경험에 어떤 영향을 주는지를 명확히 설명
- 위치 입력란을 기본적으로 비워 두고 사용자가 '인근 호텔 찾기' 같은 클릭 유도문안을 통해 위치를 입력하도록 디자인
+ 점유율 통계 사이트: gs.statcounter
- 각각의 디바이스에 따라 점유율이 달라지므로 잘 확인을 하고 디자인할 때 사용해야 함
- 일반적으로 제작할 때 모바일의 경의 760px * 1335px로 제작
+ 레이아웃 디자인을 할때 그리드 작성해주는 것이 중요
- 그리드란? 디자인을 레이아웃 하는 방법론 중 하나로 텍스트, 이미지와 같은 그래픽 요소를 계층 구조로 구성하는 일관된 프레임 워크. 그리드는 격자 구조를 만드는 행과 열, 모듈로 구성.
- 그리드 시스템을 사용하면 좋은 점
* 정돈되어 보임
* 통일성 부여
* 협업의 목적으로 내부의 기준을 정하는 것에 도움이 됨
* 반응형 디자인의 경우 해상도 대응이 쉬워짐
위와 같이 가이드라인(안내선)을 그어준 뒤, 각각의 아이콘등을 배치하면 정돈되어 보이고 통일성이 부여된다
항상 스마트 가이드가 지정해주는 것에 도움을 받아 배치를 했는데,
다음과 같이 그리드 시스템을 사용하면 보다 수월하고 깔끔하게 디자인할 수 있을 것 같다!
728x90
댓글