디자이너가 모바일 호환성으로 저지르는 7가지 일반적인 실수
게시 됨: 2021-04-13종종 디자이너는 데스크탑에서 경이적으로 작동하는 완벽한 웹 페이지나 응용 프로그램을 만드는 데 많은 시간을 할애합니다. 하지만 휴대폰으로 열어보면 사용하기가 답답하고 귀찮은 작업이 됩니다.
그리고 스마트폰이 복잡한 작업을 빠르고 효율적으로 처리할 수 있는 급변하는 세상에서 웹 페이지/애플리케이션을 모바일 인터페이스와 호환되도록 만드는 것이 무엇보다 중요합니다.
모바일과 어울리지 않는 나쁜 디자인을 가지고 있다는 단점이 많이 있습니다. 사람들이 앱을 다운로드하거나 웹사이트에 액세스하지 못하게 할 뿐만 아니라 회사의 명성과 선의를 잃게 됩니다. 따라서 모바일 인터페이스와 호환되지 않는 웹 페이지/애플리케이션을 가질 여유가 없습니다.
디자인을 재평가하고 모바일 인터페이스와 더 잘 호환되도록 돕기 위해 디자이너가 저지르는 몇 가지 일반적인 실수를 모아서 이러한 실수를 방지할 수 있습니다.
1. 모바일용 별도 URL 설정
모바일용으로 완전히 새로운 URL을 생성하면 작업이 번거롭지 않을 것 같지만 사실이 아닙니다. 모바일 애플리케이션에 대해 별도의 URL을 추가하면 득보다 실이 많을 뿐입니다.
여기서 주요 문제는 브라우저의 리디렉션 기능에 있습니다. 브라우저에서 URL을 실행하면 서버에 포함된 스크립트가 사용자가 데스크톱 또는 모바일을 통해 탐색하는지 여부를 감지하려고 시도합니다. 모바일을 통해 탐색하고 있음을 감지하면 스크립트는 모바일과 더 호환되는 별도의 URL로 리디렉션합니다. 그러나 이것은 검색 엔진 배치에 심각한 영향을 줄 수 있습니다.
그와 함께 스크립트는 사용자를 어떤 사이트로 안내할지 결정하는 데 더 오랜 시간이 걸립니다. 그리고 그것은 또한 당신의 수익에도 영향을 미칠 것입니다.
따라서 반응형 웹 디자인 기법을 사용하는 것이 더 논리적입니다. CSS3 미디어 쿼리를 사용하여 웹 페이지의 레이아웃을 변경할 수 있는 방식으로 웹 페이지를 구축합니다. 간단히 말해서 액세스하는 장치에 관계없이 전체 페이지에 대해 하나의 HTML 코드만 있고 CSS 미디어 쿼리의 도움으로 코드가 웹 페이지의 표시를 변경할 수 있음을 의미합니다.
이것의 두 가지 근본적인 장점은 데스크톱 및 모바일 콘텐츠를 단 하나의 URL로 컴파일하여 Google 알고리즘이 웹 페이지와 더 쉽게 상호 작용할 수 있도록 하고 콘텐츠에 색인 생성 속성을 할당할 수 있다는 것입니다. 이와 함께 Google에서 귀하의 콘텐츠를 보다 쉽고 효율적으로 검색하는 데 도움이 됩니다.
2. 고밀도를 기본값으로 설정
당신은 당신의 눈부신 선명한 디스플레이를 자랑하고 고객에게 최고의 품질의 성능을 제공하고 싶을 것입니다. 그러나 고품질을 선택하는 데는 나름대로의 단점이 있습니다.
- 로드 시간이 더 많이 소요됨: 고밀도 이미지 및 그래픽은 파일 크기가 더 커서 로드 시간이 더 오래 걸립니다. 높은 그래픽 카드를 사용하더라도 랩톱은 이러한 영상을 처리하는 동안 종종 충돌합니다. 그렇다면 전화는 어떻게 될까요? 이러한 고해상도는 전화기의 기능을 방해하고 고객 경험을 저하시킬 수 있습니다.
- 더 많은 데이터 사용량: 네트워크 요금제에 무제한 데이터가 있다고 나와 있지만 실제로 무제한은 아닙니다. 데이터가 제한되거나 더 느린 속도로 감소되는 특정 제한이 있습니다. 시청자가 이 정도의 데이터를 소비하게 하면 웹사이트를 떠나게 됩니다.
- 로밍 중 데이터 소비 : 이제 모든 시나리오에서 시청자가 해외에 있고 로밍 데이터로 사이트를 탐색하는 경우를 상상해 보십시오. 그리고 놀랍도록 높은 로밍 요금으로 인해 고객을 잃을 수밖에 없습니다.
따라서 웹 사이트에 고밀도 그래픽이 필요한지 아니면 저해상도 대안만으로 충분한지 평가하는 데 시간을 투자해야 합니다. 이 상황에 대한 또 다른 유용한 정보는 이미지를 벡터 형식으로 저장하거나 무손실 압축을 제공할 수 있는 초고압축 기술을 사용하는 것입니다.
3. 압축되지 않은 PNG 업로드
고밀도 그래픽을 만드는 문제에 더해 많은 디자이너가 이미지나 그래픽을 업로드하는 동안 PNG 파일을 압축하는 것을 잊어버리는 경우가 많습니다. 그들은 일반적으로 PNG-24 형식인 파일을 최적화하지 않고 Photoshop에서 직접 업로드하는 것에 매우 익숙해졌습니다.
Photoshop에서 렌더링된 사진은 밀도가 매우 높고 디지털 공간을 많이 차지합니다. PNG-24 형식 이미지는 웹 페이지/응용 프로그램에 필요하지 않을 수 있는 매우 선명한 세부 정보와 매우 정밀한 정의를 제공합니다.
Photoshop-ed 이미지를 사용할 수 있게 하려면 PNG 최적화 흐름을 통해 이러한 이미지를 실행해야 합니다. 먼저, 품질 저하 없이 이미지 크기를 반으로 줄이는 ImageAlpha라는 앱을 통해 이미지를 가져와야 합니다.
그런 다음 이미지에서 많은 기술과 기타 응용 프로그램을 사용하는 ImageOptim을 통해 전달합니다. 이렇게 하면 이미지 크기를 크게 줄이는 데 도움이 됩니다.
이렇게 하면 파일을 너무 무겁게 만들지 않고도 웹 페이지/응용 프로그램에서 여전히 고해상도 이미지 품질을 유지할 수 있습니다. 웹 페이지를 더 쉽게 처리하고 사용자 경험을 향상시킵니다. 시청자는 자신의 작업을 수행하기 위해 존재하는 것이지 그래픽을 감상하기 위해 존재하는 것이 아님을 기억하십시오. 낮은 품질의 이미지라도 대부분의 경우 효과가 있습니다.
4. 복잡하고 혼란스러운 인터페이스
가장 훌륭하고 매력적인 인터페이스를 디자인하는 과정에서 디자이너는 종종 웹 페이지를 사용자에게 너무 복잡하고 혼란스럽게 만듭니다.
모바일 웹 페이지를 디자인할 때 모든 계층과 연령대가 사용한다는 점을 이해하고 웹 페이지가 모든 연령대와 호환되는지 확인해야 합니다. 일부 젊고 고급 사용자는 인터페이스를 이해할 수 있지만 노인은 복잡한 인터페이스에 적응하는 데 어려움을 겪을 가능성이 높습니다.
이를 방지하려면 이해하기 쉽고 아이콘과 기호가 있는 친숙한 인터페이스를 통합하는 것이 좋습니다. 예를 들어 녹색 버튼은 '예', '전달' 또는 '승인됨'을 의미하고 빨간색 버튼은 '아니오', '중지' 또는 '거절'을 의미합니다.
모호하고 언뜻 이해할 수 없는 기호를 포함하지 마십시오.
또한 많은 색상과 글꼴로 페이지를 어지럽히지 않도록 하십시오. 사용자가 인터페이스에 익숙해지는 데 도움이 되는 일관성이 있어야 합니다.
5. 작고 이해할 수 없는 터치 타겟
모바일 사용자가 종종 짜증나는 것은 웹사이트의 작고 이해할 수 없는 터치 대상입니다. 마우스 커서는 쉽게 조작할 수 있고 끝이 뾰족하여 정밀한 데 도움이 되지만 손가락은 모바일 커서보다 크고 넓습니다.
이 문제는 대부분의 설계자가 픽셀 수에 따라 대상을 구성하고 화면 밀도를 고려하지 않기 때문에 발생합니다. 저가형이지만 대부분의 스마트폰은 150dpi의 해상도를 가질 수 있지만 일부 고성능 스마트폰은 400dpi를 넘을 수 있습니다.
이제 44px 정사각형의 대상을 구성하면 낮은 DPI 화면에서 7.4mm 정사각형으로 나옵니다. 그러나 동일한 픽셀 수는 고밀도 화면에서 2.5mm 상자를 생성합니다.
따라서 물리적 치수를 사용하여 목표를 측정하고 구성해야 합니다. 성인 손가락의 너비는 12mm에서 20mm 사이이며 휴대폰 키보드의 키 너비는 약 5mm입니다. 이것이 목표로 해야 하는 최소 크기이지만 키의 크기가 9mm일 때 가장 낮은 오류율을 얻을 수 있습니다. 두 키 사이의 이상적인 거리는 2mm여야 합니다. 그렇지 않으면 사용자가 실수로 잘못된 대상을 트리거할 위험이 있습니다.
따라서 대상 키의 올바른 치수와 장치를 기반으로 계산하십시오.
6. WIMP 규정 준수
새로운 기술의 시대는 진보되고 재개발된 인터페이스를 요구합니다. WIMP(Windows, Icons, Menus, Pointers)는 초창기 사용자 인터페이스의 경험 법칙이었습니다. 그러나 스마트폰과 터치 스크린의 등장으로 이러한 패러다임은 구식이 되었습니다.
새롭고 향상된 기술에 적응하려면 이러한 기존 방식을 버리고 첨단 기술의 이점을 활용할 수 있는 새로운 인터페이스를 만들어야 합니다.
다중 창을 제공하는 형식은 데스크톱에 매우 유용하지만 휴대 전화의 경우 이 방법이 매우 지루합니다. 대신 개발자는 페이지를 구성하고 정렬하는 데 도움이 되는 탭 기능을 휴대폰에 통합합니다.
터치스크린 장치를 사용할 때 손가락이 포인터 역할을 합니다. 웹사이트를 통해 사용자를 안내하기 위해 포인터가 필요했지만 터치스크린은 그런 필요성을 제거했습니다. 원하는 것을 직접 클릭할 수 있습니다. 마우스의 기능에도 불구하고 마우스의 일반적인 클릭은 화면의 더블 탭으로 대체되었습니다.
터치스크린은 또한 웹 페이지를 탐색하는 방법에 혁명을 일으켰습니다. 선택 메뉴 패턴은 메뉴의 여러 옵션을 축소하여 컴팩트한 공간에 맞추는 인기 있는 방법입니다.
7. 나쁜 온보딩 경험
온보딩은 사용자와 애플리케이션 또는 웹 페이지의 초기 상호 작용을 나타냅니다. 이것은 사용자가 애플리케이션/웹사이트에 소개되고 인터페이스가 어떻게 작동하는지에 대한 관련 힌트를 이해하는 단계입니다. 그리고 첫인상이 마지막 인상이라는 말이 있듯이.
이 시나리오에서 사용자의 온보딩 경험이 좋지 않으면 웹 사이트가 쇠퇴할 수 있습니다. 온보딩 단계에서 사용자는 웹 사이트에 대한 특정 인상을 만들고 향후 사용할지 여부에 대한 의견을 도출합니다.
다음은 나쁜 온보딩 경험으로 이어질 수 있는 특정 요소입니다.
- 보는 사람을 혼란스럽게 할 수 있는 부적절하게 디자인되고 침습적인 도구 설명
- 까다롭고 긴 가입 절차
- Google 계정과 직접 연결하는 옵션을 제공하지 않음
- 봇이 생성한 환영 이메일로 시청자를 약간 불안하게 만들 수 있음
- 초기 도입 후 명확한 경로를 만들지 않음
많은 모바일 앱 개발자는 이러한 측면을 잊고 결국 잘못된 온보딩 인터페이스를 만듭니다. 그들은 웹 페이지를 싫어하게 만드는 방법에 대한 단서나 지침을 남기지 않습니다.
따라서 사용자가 웹사이트/애플리케이션을 계속 사용하게 하려면 좋은 온보딩 경험을 구축해야 합니다. 온보딩 경험은 마지막까지 편안하게 안내하고 앞으로의 멋진 경험을 위해 준비하는 안내자와 같아야 합니다.
실수를 하는 것은 인간의 본성이며 누구도 실수에서 자유롭지 않습니다. 그러나 성공하기 위해서는 그러한 실수를 바로잡아야 하고, 더 나아가 다른 사람들이 저지른 실수로부터 배워야 합니다.
훌륭하고 호환되는 인터페이스를 구축하려면 수많은 심사 프로세스를 통해 디자인을 실행하십시오. 다양한 샘플 그룹을 통해 테스트하고 모든 인구 통계에서 성능을 평가하십시오.
좋은 사용자 경험을 만드는 데 충분한 시간과 노력을 투자하지 않으면 고객도 웹 페이지/애플리케이션에 관심을 갖지 않을 것입니다. 모든 사람과 호환되는 디자인을 만드는 유일한 방법은 세심한 작업과 앱의 모든 세부 사항에주의를 기울이는 것입니다. 온보딩 경험에서 파일 크기의 밀도에 이르기까지 모든 면에서 디자인을 최적화하여 매력적으로 만들어야 합니다.