더 나은 사용성을위한 모바일 웹 디자인 10 가지 팁

모바일 웹 브라우징은 다음 주요 인터넷 플랫폼으로 전환 될 것으로 예상됩니다. 기술로 인해 손에 쏙 들어갈 수있는 모바일 장치를 사용하여 거의 모든 곳에서 그물을 쉽게 탐색 할 수 있습니다. 모바일 웹 디자인의 유용성 구현이 부족하여 다양한 인기 모바일 웹 사이트를 둘러 볼 수 없습니다. 모바일 장치를위한 설계는 표준 웹 사이트보다 간단해야하며 사용자가 특정 및 긴급한 것을 찾기 때문에 작업 완료에 더 많은 작업 기반이 필요합니다..

주요 내용에 가장 가용 한 공간을 최소한으로 사용하는 방법과 모바일 사용자에게 흥미로운 방법을 고려해야합니다. 큰 이미지 및 플래시 애니메이션은 사이트 속도를 늦추지 않으므로 피하십시오. 모바일 웹 사이트의 스타일보다는 기능이 더 중요하다는 것을 기억하십시오. 귀하의 웹 사이트가 코딩되고 적절히 설계되지 않았다면, 한 전화기에서는 더 좋게 보일 수 있고, 최악의 경우에는 최악의 경우, 그렇지 않은 경우에는 전혀 표시되지 않을 수 있습니다. 모든 모바일 장치와 호환되는지 테스트하고 검증하고 확인하십시오..

데스크톱 또는 랩톱 컴퓨터뿐만 아니라 모바일 장치에서도 액세스 할 수있는 웹 사이트를 만드는 데 도움이되도록 샘플 웹 사이트에서 모바일 웹 버전의 직접 링크와 함께 고려해야 할 몇 가지 사항을 소개합니다.

1. 화면 해상도 결정

모바일 세상에는 다양한 화면 크기와 해상도에서 다양한 모양에 이르기까지 다양한 디자인 고려 사항이 있습니다. 충분한 화면 너비와 잠재 고객 크기 사이의 균형을 유지하십시오. 현재 모바일 장치의 사양을 확인하고 최선의 판단을 사용하십시오. 모바일 개발자가 도전할만한 이유는 여러 플랫폼에서 페이지를 다시 만들지 않고도 다양한 화면 크기에서 적절히 표시되도록하는 방법입니다.

다음은 Uxbooth.com에서 발표 한 2011 년 2 월 모바일 장치에서 널리 사용되는 웹 결재 목록입니다, 모바일 웹 디자인을위한 고려 사항 (2 부) : 크기, David Leggett. 레이아웃 디자인을위한 디스플레이 크기 및 솔루션에 대한 몇 가지 사항을 설명합니다..

2. 웹 페이지를 작은 부분으로 나누십시오.

텍스트의 길이가 긴 부분은 읽기 어려울 수 있으므로 여러 페이지에 배치하면 스크롤이 한 방향으로 제한됩니다. 우선 순위가 낮은 콘텐츠를 제거하십시오. 스크롤하는 텍스트의 단일 열에 집착하여 가로 스크롤이 없습니다..

아래 예에서 CBS 뉴스 모바일 웹 사이트 버전은 주요 뉴스 섹션 만 표시하고 뉴스 기사는 작은 부분으로 나눕니다. Treehugger는 최신 기사와 최신 트윗을 전체 웹 사이트의 일부 기능과 함께 제시하지만. 두 사이트 모두 사용자가 텍스트 링크를 클릭하여 나머지 기사를 볼 수 있습니다..

CBS 뉴스

Treehugger

3. 디자인 단순화

단순성은 유용성과 동일합니다. 그들이 어려움없이 사이트를 돌아 다니게하십시오. 테이블, 프레임 및 기타 서식을 포함하지 마십시오. 패딩을 사용하는 경우 일반 웹 페이지에 사용하는 것보다 훨씬 적은 절대 값을 유지해야합니다. 데스크톱 컴퓨터에 비해 모바일 웹 사이트의 링크를 클릭할수록 로딩 시간이 길어집니다. 이를 통해 콘텐츠와 탐색 간의 균형을 유지하면서 웹 사이트를 줄이고 단순화해야합니다..

예를 들어 Best Buy의 모바일 버전 웹 사이트에는 콘텐츠의 계층 구조 수준을 줄이는 가장 필수적인 제품 범주 만 나열되어 있습니다. YouTube 모바일 홈 페이지에는 최신 스포트라이트 동영상 4 개만 표시되지만.

베스트 바이

YouTube

4. 전체 웹 사이트를 볼 수있는 옵션

사용자가 사이트의 데스크톱 버전에서만 액세스 할 수있는 다른 콘텐츠와 기능을 찾고 볼 수 있도록 모바일 방문자가 전체 웹 사이트로 다시 전환 할 수있는 링크를 제공합니다. 시청자는 반드시 수직 스크롤링을 많이 할 것이므로 '맨 위로 이동'링크를 사용하여 페이지 상단으로 이동할 수 있습니다.

예를 들어 Ars Technica는 표준 웹 사이트 링크 버튼을 제목에 표시합니다. Shangri-La는 전체 웹 사이트 링크가 바닥 글에 배치되어 있지만.

아르스 테크니카

샹그릴라

5. 탐색 배치

잠재 고객을 파악하고 그들이 원하는 것을 알고 있어야합니다. 그들이 어떻게 당신의 위치를 항해하고 싶을 지 알아 내십시오. 타겟 모바일 사용자가 컨텐츠를 신속하게 변경하려는 경우 탐색 메뉴를 컨텐츠 아래에 배치하십시오. 페이지 콘텐츠를 보지 못하게하려면 먼저 콘텐츠와 헤드 라인을 표시해야합니다. 특정 카테고리를 즉시 탐색하려는 사용자의 경우 탐색을 페이지 상단에 배치하십시오. 다음은 모바일 웹 디자인에 사용되는 탐색 배치의 다양한 샘플입니다..

D & G

폴리 티코

일일 별점

6. 텍스트 링크 사용

주요 웹 사이트는 Whizzy Fly-Out 메뉴, 롤오버 또는 기타 멋진 장치를 사용할 수 있지만 모바일 브라우저는 그렇지 않을 수 있습니다. 동적 페이지 요소 및 그래픽 링크는 리소스를 소비하므로 잘 레이블 된 텍스트 링크를 선택하십시오..

별개의 목록

7. 선택한 링크를 구별합니다.

커서를 아래로 이동하면 페이지가 스크롤되고 링크가 한 번에 강조 표시됩니다. 따라서 사용자에게 초점이 맞는 항목을 명확하게 알려주는 것이 중요합니다. 이 작업은 링크와 버튼의 글꼴과 배경색을 변경하거나 링크 주위에 약간의 패딩을 추가하여 클릭 가능한 영역을 약 44x44 픽셀로 확대 할 수 있습니다. Geek Squad와 Diesel은 클릭 가능한 텍스트에 큰 글꼴 사용.

괴짜 분대

디젤

8. 잔액 링크

각 페이지 다운로드는 시간과 시스템 리소스를 소비합니다. 후자는 부족한 편이므로 사이트 방문자가 많은 페이지를 통해 digg로 이동하여 원하는 정보에 액세스하지 않도록하십시오. 각 페이지의 링크 수와 사이트의 깊이 사이의 균형을 잡습니다..

플리커

지저귀다

9. 사용자 텍스트 입력 줄이기

모바일 버전의 웹 사이트에서는 텍스트를 입력하기가 어렵습니다. 대신 라디오 버튼이나리스트로 교체하여 그들이 원하는 것을 쉽게 선택할 수 있도록하십시오. 모빌 사용자는 기존의 키보드 및 마우스에 액세스 할 수 없습니다. URL이 짧을수록 긴 URL을 입력하는 것이 단조롭기 때문에 좋습니다..

아래의 샘플에서 Fedex는 체크리스트와 드롭 다운 메뉴를 사용했습니다. Tumblr이 드롭 다운 메뉴를 사용하여 언어를 선택하게하는 동안.

페덱스

텀블러

10. 팝이나 새로 고침 없음

모바일 브라우저는 일반적으로 팝업을 지원하지 않습니다. 그리고 그들이 그렇게했다면, 그들은 좁힐 공간이 아주 좁을 것입니다. 예기치 않은 결과를 피하려면 사용하지 마십시오. 또한 장치가 제한된 메모리를 채우지 않도록 정기적으로 페이지를 새로 고치지 마십시오. 사용자가 콘텐츠를 새로 고침하게하십시오..

In a Nutshell

창의력을 발휘하고 모바일 웹 디자인을 새로운 방식으로 적용하십시오. 귀하의 콘텐츠를 충분히 강력하고 유용하게 만드십시오. 원하는 때에 원하는대로 사용자에게 제공하십시오. 사용자는 모바일 웹에서 찾고있는 것을 찾기 위해 사이트를 더 깊이 파고 싶지 않습니다..

정말로 영감을 얻은 모바일 사이트가 있습니까? 모바일 웹 디자인 팁을 공유 할 수 있습니까? 저희에게 알려주십시오.!

더 읽을 거리

반응 형 웹 디자인 (alistapart.com)
모바일 친화적 인 사이트 만들기 (thinkvitamin.com)
W3C mobileOK Checker (w3.org)
iPhone 시뮬레이터