brunch

라이킷 14 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX DAYS SEOUL Oct 17. 2021

모바일 디자인 시의 8 가지 제한 사항

Designing For Mobile

이 기사는 Baymard의 허가 아래 게재하고 있습니다.
(2012년 03월 21일의 기사입니다)

표준 데스크톱으로 설계된 웹 사이트를 보유해도 시대에 뒤떨어지지 않도록 모바일 친화적으로 만들기를 원할 것입니다. 그러나 이것은 단순히 디자인을 축소하는 문제가 아니라 새로운 상호 작용 패턴 및 제한 사항이 있는 새로운 플랫폼입니다.

이 기사에서는 데스크톱에서 모바일 웹으로 전환할 때 알아야 할 8가지 UI 제한 사항을 살펴보겠습니다.

1) 호버 없음 상태

"풀다운하는 새로 고침"은 기본 앱에서 상당히 일반적인 기능이며 일부 웹 앱에서도 이를 구현했습니다

스마트폰에는 호버 상태가 없습니다. 일반적으로 호버링 할 때만 표시되는 링크와 버튼으로 인터페이스가 빠르게 비대해지기 때문에 기능이 많은 페이지에서는 문제가 될 수 있습니다. 모바일에서 모든 정보 또는 기능은 다음 두 가지 방법 중 하나로 액세스해야 합니다.

가시성 – 시각적 수단을 통해 콘텐츠와 기능에 액세스 할 수 있습니다. 하위 섹션이나 하위 페이지에 중첩될 수 있지만 콘텐츠는 버튼이나 링크와 같은 가시적 탐색 요소에서 액세스 할 수 있습니다.

규칙 – 모바일 디자인 규칙에 의존하여 사용자가 스와이프나 흔들기와 같은 특정 제스처를 사용하거나 사용자가 새로 고치기 위해 콘텐츠를 끌어다 놓을 때만 콘텐츠를 숨기고 표시할 수 있습니다.

마지막 접근 방식인 규칙은 인터페이스를 단순화하는 데 도움이 될 뿐만 아니라 불분명한 위험도 내포하고 있습니다. 기본적으로 사용자는 a) 규칙을 알고 b) 사이트에서 해당 규칙을 지원하는지 테스트합니다. 그러나 두 가지 기능 중 하나가 평평할 경우 사용자는 기능이 존재하는지 기본적으로 알지 못하므로 이러한 기능은 처음 방문할 때 설명되거나 현장 경험에 필수적이지 않아야 합니다.

2) 느리고 오류가 발생하기 쉬운 타이핑

터치 키보드로 타이핑하는 것은 느리고 오류가 발생하기 쉬운 연습이므로 양식 필드를 절대 최소로 유지하고 교묘한 기본값을 미리 선택해야 합니다. 또한 데이터의 오류를 처리하는 방법도 고려해야 합니다.

데스크톱 디자인에서도 잘못된 데이터를 처리해야 하지만 터치 키보드와 더 작은 화면 크기(컨텍스트 및 개요 제공)로 인해 터치 장치에서 작성된 양식에 훨씬 더 많은 오류가 발생할 수 있습니다. 데이터가 제출된 후 사용자가 데이터를 편집할 수 없는 경우 검토 페이지는 더 긴 양식에 대해 좋은 생각일 수 있습니다.

최적화된 터치 키보드를 사용하는 것이 핵심입니다. 자동 완성 기능, 지오 데이터 사용, 인라인 유효성 검사, 주소 유효성 검사기 및 사용자 입력이 입력될 때 제안 및 수정하기 위한 기타 방법을 고려할 수도 있습니다.

3) 컨텍스트의 축소

터치 장치의 화면이 작을수록 컨텍스트가 감소합니다. 이로 인해 사용자가 페이지의 개요를 얻고, 다양한 옵션을 비교하며, 이전 내용을 기억하기가 더 어려워지는 경향이 있습니다.

긴 형식을 고려하십시오. 사용자가 아래로 스크롤하면 이전에 입력한 데이터와 함께 양식 제목이 사라집니다. 이 컨텍스트가 없으면 현재 볼 수 있는 양식 필드의 의미를 해석하기가 훨씬 더 어려워집니다. 그것은 또한 오류를 소급해서 발견하는 것을 어렵게 만든다. 이 경우 검토 또는 요약 화면은 잘못된 데이터를 방지하는 데 도움이 될 수 있지만 화면 상단에 고정된 헤더는 컨텍스트를 유지하는 데 도움이 될 수 있습니다. (물론 고정된 헤더는 고유한 콘텐츠에 대한 화면 특성을 낮추므로 인근 필드의 문맥이 더 중요한 경우 이 접근법은 문맥을 실제로 줄일 수 있습니다)

4) 부정확한 클릭

'Gamelife'나 'Playbook'을 클릭할 건가요, 아니면 'Epicenter'를 클릭할 건가요?

터치 기기에서 사람들은 손가락으로 화면의 링크와 버튼을 클릭하는데, 이것은 클릭의 정확도를 현저히 떨어뜨립니다. 이것은 "뚱뚱한 손가락 문제"로도 알려져 있습니다.

실제로는 클릭 가능한 모든 요소의 크기와 근접성을 고려해야 하며, 사용자가 실수로 잘못된 요소를 건드리지 않도록 충분히 멀리 떨어져 있어야 합니다. 내비게이션과 제어 바는 모두 페이지에 중대한 영향을 미치는 수많은 클릭 가능한 요소(우발적인 클릭 가능성이 더 높아짐)를 포함하기 때문에 특히 중요합니다(우발적인 클릭이 더 중요합니다. 모바일 전자 상거래 사용 적합성 연구 중에 실수로 클릭을 하여 발생하는 수많은 하위 문제를 관찰했으며, 일부는 포기까지 초래하기도 했습니다)

우발적인 클릭에 대처하는 한 가지 방법은 사용자에게 자신의 행동을 확인하도록 요청하는 것이지만 그것은 짜증을 유발할 수 있습니다. 훨씬 덜 거슬리는(일반적으로 더 나은) 접근법은 사용자가 의도적인 행동을 지속적으로 중단하는 것과는 반대로 우발적인 행동을 되돌릴 수 있는 "Undo" 기능을 갖는 것입니다.

5) 연결 불량

스마트폰의 간헐적인 연결 문제 및 느린 다운로드 속도에서는 드문 일이 아닙니다. 이것은 정말로 두 가지 쟁점입니다.

연결 없음 – 사용자가 웹 사이트에서 오프라인 모드를 예상하지 못할 수도 있지만, 손실된 연결을 적절하게 처리해야 합니다. AJAX 사용 기능은 특히 예기치 않은 동작과 자동 오류가 발생하기 쉽습니다(내비게이터. OnLine 참조).

느린 다운로드 속도 – 모바일 EDGE 네트워크에 있는 경우 다운로드 속도가 매우 저하됩니다. 즉, 느린 연결에도 사이트를 사용할 수 있어야 하는 경우 이미지 대신 CSS3 효과를 사용하여 공격적인 자산 캐싱을 구현하여 설치 공간을 최대한 작게 만들어야 합니다.

물론 이 두 솔루션 모두 모든 유형의 네트워크에서 경험을 개선할 것입니다. 사이트의 다운로드 설치 공간을 줄이면 연결 속도가 빨라집니다.

6) 느린 하드웨어

터치 장치의 성능은 빠르게 향상되고 있지만 데스크톱 컴퓨터에 비해 여전히 느린 장치입니다. 이는 페이지 초기화 속도가 매우 느릴 수 있음을 의미합니다. 특히 페이지 로드 시 자바스크립트를 많이 실행할 경우 더욱 그렇습니다.

느린 하드웨어의 또 다른 문제는 전환 및 기타 애니메이션이 "지체"되어 미적으로 불쾌할 뿐만 아니라 사용자의 가상공간 감각을 손상시킬 수 있다는 것입니다.

두 경우 모두 좋은 프로그래밍이 가장 중요합니다. 자유 사용 하드웨어 가속 CSS 애니메이션과 결합된 지연 자바스크립트 실행은 대부분의 경우 제대로 구현될 때 효과가 있습니다.

7) 사용 상황

스마트폰의 본질은 이동성이기 때문에 "실제"의 산만함이 미치는 영향을 고려해야 합니다. 또 다른 더 큰 방해 요인으로는 문자 메시지, 전화 통화, 푸시 알림, 등이 있습니다.

이러한 두 가지 원인은 사이트의 "반환성"을 점점 더 중요하게 만듭니다. 사용자가 주의를 산만하게 한 후 사용자의 사이트로 돌아갈 경우 사용자가 떠난 위치를 즉시 찾을 수 있습니까? 아니면 필수 컨텍스트가 부족합니까? 페이지를 새로 고치면 양식을 제출하지 않았음에도 불구하고 데이터가 그대로 남아 있습니까(HTML5 localStorage 참조)? 세션이 만료되었습니까?

8) 우클릭 없음 (Jamie 추가)

사용자 지정 오른쪽 클릭 메뉴는 기존 웹 사이트에서는 사용되지 않지만 점점 더 많은 웹 앱(예: Google Docs)과 대부분의 기본 소프트웨어에서 볼 수 있습니다. 여기서 마우스 오른쪽 버튼 메뉴는 일반적으로 사용되는 기능에 대한 빠른 컨텍스트 기반 바로 가기 역할을 하는 경우가 많습니다. 그러나 모바일 장치에는 기존의 마우스 오른쪽 버튼 옵션이 없습니다. "탭 앤 홀드 제스처"를 사용하는 것이 떠오르는 가장 가까운 대안입니다.