UX원칙

모바일 사용자는 일반적으로 작은 화면에서 짧은 시간 내에 작업 완료하는 것을 선호한다.

모바일 사용자가 목표지향성이 강하다. 필요한 것을 쉽고 즉각적인 응답을 기대한다.

웹 사이트 구현 기법

• 반응형 웹 디자인(다이나믹)

사용자가 기기와 무관하게 같은 html 을 제공하지만, 화면 크기에 반응하여 디스플레이를 다르게 렌더링. 권장 패턴

• 동적 제공(dynamic serving)

기기와 무관하게 같은 url을 사용하지만, 서버에서 사용자 브라우저를 파악하여 기기 유형별로 다른 html 사용

• 개별 url(seperate url)

기기마다 다른 코드를 별도의 url을 제공. 사용자 기기를 감지할 후 http 리디렉션과 vary http 헤더를 이용해서 적절한 페이지로 리디렉션한다.

좋은 모바일 사이트의 조건

• 홈페이지 네비게이션
• 사이트 검색
• usdability & form factor
• streamline
• keep form

모바일 사이트 디자인 권장사항

데스크톱 홈페이즈는 일반적으로 시작페이지, 고객 문의처, 프로모션 등의 공간 역할을 모두 수행. 반면, 모바일 페이지는 각 콘텐츠를 사용자에게 연결하는데 주력한다.

1. 클릭 유도안을 중심에

   보조작업은 메뉴나 스크롤해야하는 부분에 위치

2. 짧고 친절한 메뉴 - 카테고리 분류

3. 홈페이지로 쉽게 돌아가도록 지원 - 로고 클릭시 홈페이지로 돌아감

4. 과도한 프로모션 자제

전면광고보다 배너 선호

사이트 검색

1. 검색을 가장 잘 보이는 곳에 위치.

   페이지 상단에 빈 텍스트 검색창

2. 검색결과의 관련성 보장 ( 개발)

   자동완성, 맞춤법 수정 등 지원

3. 필터를 구현하여 사이트 검색 사용성 개선

   정확성을 위한 필터 제공. 단, 필터로 인해 검색 결과가 0개가 되면 안된다.

   특정 필터 사용시에 몇개가 반환되는지 미리 알리기 - 편의성

4. 검색결과 개선

   세그먼트를 기준으로 검색 범위를 쉽게 좁힐 수 있는 경우 사전에 몇 가지 질문을 한다.

   예를 들어 신발 업체에서 성별, 사이즈 등을 미리 받아 선별.

상거래 구매 단계

사용자는 스스로 주도하는 전환 방식을 원한다. 주도권을 사용자에게 넘겨서 구매단계를 유도

1. 구매 결정 전 충분히 탐색하도록 지원

   방문자가 계정 등록없이 사이트를 둘러볼 수 있게 한다.

   개인정보 제공 전 사이트 둘러보기

2. 비회원 구매 허용

   비회원 결제 옵션을 제공하되 실질적 혜택(포인트 등)으로 등록을 유도.

3. 기존 정보 활용으로 편의성 극대화

   이미 보유한 정보나 타사 결제 서비스를 활용하여 구매단계를 쉽게 만든다. (개발)

   네페나 .. 그런거 얘기하는 듯

4. 복잡한 작업에는 클릭 통화버튼

   눈에 띄는 클릭 통화버튼은 사용자가 복잡한 정보를 제공해야 할 때 이탈을 막을 수 있다.

   민감한 정보/복잡한 과정에서 제공

5. 다른 기기에서 쉽게 전환을 완료하도록 지원

   장바구니, 소셜 공유, 이메일 등 제공.

   예로, 취업정보를 이메일로 보내기.... ← 스크랩이 낫지 않나?

양식 입력

사용자의 구매 과정은 최대한 원활하고, 간편. 간소한 입력 양식 선호

1. 간소한 입력 양식

   숫자패드 제공, 다음 입력란 제공(엔터 누르면) 등.

2. 작업마다 간단한 입력방법 선택

   드롭다운, 전환버튼, 키보드 ... 등.

   많은 옵션 → 드롭다운, 적은 옵션 → 전환버튼

3. 날짜 선택 시 캘린더 제공

   시작 종료일이 있을 경우 분명한 라벨 제공

4. 라벨 표시 및 실시간 검증으로 양식 오류 최소화

   입력정보를 선명히 알려주는 라벨 사용. 오류를 실시간으로 검증 (@, . 이 빠졌다거나)

5. 효율적인 양식 다자인

   자동입력, 입력란 갯수 최소화, 반복작업이 있으면 안된다.

   여러단계일 경우 진행률 표시줄 제공.

사용성 및 폼 펙터

1. 모바일에 맞춘 전체 사이트 최적화 (당연함! 중요함!)

2. 화면 확대 필요없는 사이트

3. 제품이미지 확대 가능 - 고화질 이미지 사용

4. 효과적인 화면 방향 안내?

   동영상, 작은 활자 등 ... 최적의 화면 방향이 있다면 유도. 변경하지 않더라도 잘 돌아가야함.

5. 단일 브라우저 창에 붙잡아두기

   클릭 유도문안을 이용해도 새로운 브라우저 창을 열리지 않도록 개발. 창을 전환하지 않도록 해야함.

   예로 쿠폰 발행 ...

6. 전체 사이트 라벨 지양

   pc 화면으로 보기, 모바일 화면으로 보기 모두 제공.

7. 사용자 위치가 필요할 경우에는 이유 명시.

   인근 호텔 찾기 등 클릭 유도안을 통해 위치를 입력하도록 디자인한다.