모바일 사용자 환경 설계를 위한 7가지 사례 #모바일설계 #UI #UX

지난 3 년 동안 데스크톱 인터넷 사용률은 90%에서 60%로 떨어졌고 모바일 사용은 40%까지 증가했습니다.
이 추세에 따라 모바일 장치는 곧 데스크톱 인터넷 액세스를 무대로 설정됩니다. 금방.

StatCounter의 이미지

모바일 장치 용으로 설계 할 때 많은 디자이너가 사용하는 기본 접근 방법은 여전히 ​​(데스크톱) 웹사이트를 축소하고 반응 형으로 만드는 것입니다. 이 접근법은 모바일 디자인에 대한 전략 입니다. 사이트를 축소하기보다는 고객의 비즈니스를 조사하고 특정 비즈니스를위한 모바일 액세스의 중요성을 확인해야합니다.

클라이언트의 고객이 주로 데스크톱 / 랩톱 사용자 인 경우 (예 : 워크 스테이션에서만 액세스 할 수있는 도구에 대한 엔터프라이즈 수준의 액세스) 모바일 액세스에 대해 신경 쓸 필요가 없습니다. 그러나 고객이 온라인 상점을 원하거나 고객의 위치에 따라 현지화 된 정보를 제공한다면 모바일 첫 디자인 방식을 사용하는 것이 좋습니다 . 가장 많은 사람들에게 다가 가고 고객의 비즈니스를 성장 시키려면 다양한 장치에서 액세스 할 때 웹 사이트가 잘 작동해야합니다. 따라서 먼저 모바일 웹전략을 수립하기위한 노력을 기울이십시오 .

모바일 장치를 설계 할 때의 어려움은 다양한 변형, 크기 및 맛이 존재한다는 것입니다. 1990년대의 위대한 브라우저 전쟁에서 브라우저와 비슷합니다!

더 우수하고 직관적이며 사용자 친화적 인 모바일 환경을 위해 모바일 디자인에서 유의해야 할 몇 가지 모범 사례를 자세히 살펴 보도록하겠습니다.

1. 분명하고 집중적인 콘텐츠가 있어야합니다.

진짜야?!

많은 사람들이 서둘러 서둘러 이동하면서 휴대 기기를 사용합니다. 작은 터치 스크린과 결합되어 쉽게 검색하거나 탐색 할 수 없습니다. 모바일 경험을 위해 디자인하는 동안 최소주의 규칙. 혼란을 최소화하십시오. 홈페이지를 포함하여 각 페이지에는 한 가지 핵심 만 있어야합니다. 스 와이프 같이 다음 페이지 또는 가로 스크롤로 이동하는 것과 같은 비정형적인 동작이있는 경우 사용자가이를 픽업한다고 가정하지 마십시오. 사용자가 쉽게 사용할 수 있도록하십시오. 작은 화살표 나 호버링 메시지를 사용하여 이러한 기능을 사용하는 방법을 알려줍니다. 원하는 기능을 쉽게 찾을 수 있도록 도와줍니다. 모바일 사용자는 자신의 경험을 부드럽게 만들어주는 작은 것들을 알아 차리고 평가합니다. 그리고 물론, 그것은 당신을 위해 더 잘 작동합니다.

2. 메뉴 및 탐색 : 간단하게 유지

기존 데스크톱 웹 사이트는 페이지 상단에 눈에 잘 띄는 메뉴 모음을 표시합니다. 모바일에서는 소중한 화면 공간을 차지합니다. 이 문제를 해결하려면 메뉴를 모바일 화면의 왼쪽 위 또는 오른쪽에있는 아코디언 또는 아이콘을 드롭 다운하십시오.

휴대 전화에서 제대로 작동하지 않는 또 다른 데스크톱 습관은 마우스를 올리면 표시되는 하위 메뉴가있는 다중 레벨 메뉴입니다. 모바일 장치에서는 액세스 가능한 상태로 유지하려고합니다. 사용자가 뭔가를 찾기 위해 4단계의 메뉴를 탭해야하는 경우 두 번째 탭 이후에 떠날 확률이 높습니다. 가능한 한 모바일 사이트에서 여러 수준의 메뉴를 피하십시오. 이는 3레벨 탐색 메뉴와 10개의 위젯이 사이드 바를 몰아 부쳤다 고하더라도 웹 사이트에서 거의 모든 정보를 얻기 위해 열심히 노력한 데스크탑 디자인과는 완전히 다른 것입니다. 휴대 기기의 화면 공간에 프리미엄이 첨부되어 있습니다. 최소한으로 유지하고 사용자가 빼앗길 원하는 주요 메시지에 집중하십시오. 실제로 데스크톱 사이트에서도이를 따르는 것이 좋습니다.

3. 유체 레이아웃 생성

많은 모바일 장치는 다양한 차원을 의미합니다. 그러나 유혹하는 것은 320 픽셀 너비로 디자인하는 것이 아닙니다. 마찬가지로 176, 240, 320, 360, ~ 480-600 (가로)도 일반적인 장치 너비입니다. 레이아웃을 유연하고 유동적으로 유지하면 다양한 화면 크기에서 제대로 표시됩니다. 고정 된 중단 점과 일치하는 장치에서 사이트가 작동하기를 원하지 않지만 다른 모든 부분에서는 이상하게 보입니다. 유체 레이아웃에 대한 입문서 와 반응 형 디자인에서 유체 레이아웃을 작동시키는 방법 에 대해 설명합니다.

4. 터치를위한 디자인

키보드와 마우스 이벤트 를 사용하여 웹 사이트와 상호 작용할 때 좋은 옛날은 없어졌습니다 . 휴대 기기에서는 주로 상호 작용의 기본 모드가 좋습니다. 터치를위한 디자인은 데스크톱 세계에서 필요하지 않은 수준의 관리가 필요합니다. 정확한 커서 대신에, 이제 다르게 반응하는 터치 스크린에 다양한 종류의 압력을 가하는 모든 모양과 크기의 손가락을 고려해야합니다. 터치 입력 또는 제스처가 필요한 양식, 버튼 및 기타 요소가 인접 요소와의 겹치기 또는 터치 이벤트의 오역을 피하기에 충분히 큰지 확인해야합니다.

터치 입력에만 의존하지 마십시오. 스타일러스를 사용하는 많은 모바일 장치와 여전히 방향키 패드를 사용하는 일부 오래된 모바일 장치가 있습니다. 자바 스크립트 터치 이벤트를 완벽하게 지원하지 않는 모바일 장치 / 브라우저 가 많이 있습니다. 예를 들어 태블릿에 연결된 마우스를 사용할 때와 같이 사용자가 입력 장치를 함께 사용하는 경우도 있습니다 . 이러한 시나리오는 빈번하지 않지만 웹 사이트의 중요성을 평가하고이를 처리 할 수있는 적절한 조치를 취하십시오.

5. 양식을 최소한으로 유지하십시오.

작은 터치 스크린과 아직 5mm x 5mm 크기의 키가있는 더 작은 가상 키보드는 행복한 타이핑 경험을 제공하지 않습니다. 양식을 간단하고 작게 유지하십시오. 필요한 경우 필요한 데이터를 얻는 데 필요한 필드 수가 가장 적은 모바일 사용자를 위해 별도의 양식을 보관하십시오. 가능한 한 필드를 기본값으로 미리 채 웁니다. 일반적으로 사용되는 필드 에는 자동 채우기 를 사용하십시오.

예를 들어 사용자가 날짜를 입력하는 대신 시각적 인 달력을 사용하십시오. 단일 화면보다 긴 양식의 경우 사용자에게 얼마나 멀리 왔는지를 나타내는 진행 막대를 표시하는 것이 좋으며, 더 중요한 것은 완료하는 데 얼마나 가깝게 진행되는지를 보여주는 것입니다. 다음은 Google에서 좋은 양식 을 만드는 데 유용한 가이드라인입니다.

우리가 형식에 대해 이야기하는 동안 레이블 배치에 대해 어떻게 이야기 할 수 있습니까? 사용자가 상단 정렬 레이블을 사용하여 양식을 더 빠르게 작성한다는 사실을 알고 있습니까? 입력 필드 위에 레이블을 유지하면 사용자가 입력하는 동안 장치가 입력 필드를 확대하더라도 여전히 레이블이 표시됩니다. 상단 맞춤 라벨을 사용하면 페이지를 스크롤하면서 필드를 스캔하고 추적 할 수 있습니다. 

6. 이미지 놓기

크기와 속도는 모바일 사이트에서 가장 중요한 두 가지 성능 측정 값입니다. 그라디언트 및 그림자와 같은 멋진 효과를 얻기 위해 이미지를 사용하지 마십시오. CSS로 가능한 것의 기본을 배우고이를 디자인에 통합하십시오. 이미지로 얻으려는 특수 효과가 적을수록 좋을 것입니다. 구형 모바일 브라우저에서 모든 CSS3효과를 사용할 수있는 것은 아니지만 괜찮습니다. 이 사이트는 모든 장치의 디자인에 완벽한 100 % 픽셀일 필요는 없습니다.

디자인에 멋진 텍스트를 이미지로 사용하는 것을 좋아한다면, 이것을 놓을 좋은 시간입니다. 텍스트를 텍스트로 유지하십시오. 멋진 글꼴을 사용하여 원하는 효과를 얻을 수 있습니다. 그러나 사이트의 공간과 페이지로드 시간을 줄이려면 추가 이미지를 삭제하십시오.

7. 모바일 특정 기능 활용

iPhone에서 슬라이드 잠금 해제

모바일 장치에는 "슬라이드 잠금 해제"또는 전화 걸기 기능과 같이 데스크톱 장치에서는 사용할 수없는 GPS, Gyrometers 및 기타 센서와 같은 많은 기능이 있습니다. 이러한 기능을 사용하여 웹 사이트의 모바일 경험을 더욱 향상시키는 방법을 알아보십시오. 연락처 페이지의 전화 번호로 "탭하여 전화 걸기"와 같은 간단한 기능을 추가하거나, 소셜 미디어 플랫폼 또는 GPS를 통해 쉽게 공유 할 수있어 위치 별 정보와 서비스를 제공 할 수 있습니다. 이 부분은 상자에서 벗어나 생각하고 모바일 전용 기능을 활용하여 모바일 환경을 개선하는 부분입니다.

모바일 디자인에 대해 더 많이 알고 싶다면 다음과 같은 유용한 리소스를 활용하십시오.

이미이 우수 사례를 따르고 있습니까? 좋은 모바일 경험을 디자인하기위한 가장 좋은 방법은 무엇입니까?