모바일 UX 디자인 제약, 모범 사례 및 개발자와 협력

모바일 UX 디자인 모범 사례를 따르고 제약 조건을 이해하며 개발자와 긴밀한 협력 관계를 촉진함으로써 더 나은 사용자 경험을 얻을 수 있습니다.

모바일 UX 디자인이란?

TechCrunch의 최근 기사에 따르면 모바일 전자 상거래는 2018년 추수 감사절 연휴 기간 동안 전체 온라인 판매의 거의 1/3을 차지했으며 2017년 Digital Trends는 전 세계적으로 50억 명이 모바일 장치를 가지고 있다고 보고했습니다. 또한 Google은 이제 검색 결과에서 웹 페이지의 절반 이상이 모바일 우선 인덱싱을 사용한다고 발표했습니다.

사람들은 통신, 전자 상거래, 콘텐츠 소비, 업무, 은행 업무, 길 찾기를 위해 매일 모바일 장치에 의존하고 있으며 점점 더 자신의 유일한 컴퓨팅 장치로 사용하고 있습니다. 뿐만 아니라 휴대폰, 스마트 워치, 태블릿, 패블릿, 웨어러블, 하이브리드 노트북 등 다양한 기기를 사용하고 있습니다.

모바일 UX(사용자 경험) 디자인은 모바일 장치 및 웨어러블, 이러한 장치에서 실행되는 응용 프로그램 또는 서비스를 사용하는 동안 긍정적인 경험을 디자인하는 것을 말합니다. 모바일 UX 디자인은 효율성과 검색 가능성에 중점을 둡니다. - 인터랙션 디자인 재단

UX 디자이너에게 이러한 모바일 장치 트렌드는 도전과제이자 기회를 모두 나타냅니다. 한편으로 우리는 다양한 장치와 장치가 사용되는 방식을 고려해야 합니다. 다른 한편으로, 이것은 UX 디자인에서 완전히 새로운 초점 영역을 열어주며, 이는 완전히 새로운 세대의 사용자를 위한 긍정적인 경험을 창출한다는 것을 의미합니다.

모바일 UX 디자인 모범 사례

모바일 UX 디자인은 까다롭습니다. 이전에 언급했듯이 모바일 장치의 증가 목록, 사람들이 모바일 장치와 상호 작용하는 방식, 사람들이 모든 장치 유형에서 일관되고 즐거운 경험을 원한다는 사실을 포함하여 고려해야 할 사항이 너무 많습니다.

Google의 25가지 모바일 UX 디자인 팁

2015년 Google은 내부 연구를 기반으로 25개의 모바일 UX 디자인 모범 사례를 발표했습니다. 이 팁은 최신 정보를 제공하기 위해 최근에 업데이트되었습니다. 저자는 또한 모든 모바일 UX 프로젝트에 편리하게 보관할 수 있는 25가지 팁이 모두 포함된 다운로드 가능한 PDF를 포함하고 있습니다.

Apple의 휴먼 인터페이스 지침

편리하게 보관할 수 있는 또 다른 훌륭한 리소스는 모바일 디자인을 위한 Apple의 휴먼 인터페이스 지침입니다. 아름다운 레이아웃으로 읽기 쉽고 모범 사례, 팁 및 Apple의 디자인 원칙에 대한 자체적인 해석이 포함되어 있습니다. 모바일 UX 디자이너에게 이 지침은 고품질 사용자 경험을 제공하기 위한 훌륭한 리소스입니다.

추가 모바일 UX 모범 사례

다음은 Google만큼 잘 알려져 있지는 않지만 모바일 디자이너가 고려해야 할 만큼 중요한 모바일 UX 디자인 모범 사례입니다.

• UX 연구 . 어떤 시점에서 우리는 목업이나 프로토타입으로 바로 들어가고 싶은 마음이 들 수도 있지만, 먼저 적절한 UX 연구를 하는 것은 과소 평가할 수 없는 것입니다. "당신은 당신의 사용자가 아니다"라는 것을 항상 기억하고 긍정적인 사용자 경험은 모든 경우에 철저한 UX 연구에 의존합니다. 다음은 추가 참조를 위한 Adobe의 UX 연구 방법에 대한 종합 가이드입니다.
• 혼란 . 우리 모두는 복잡한 데스크탑의 불안을 경험했습니다. 모바일 장치에서 그것을 상상해보십시오! 추가된 모든 버튼, 이미지, 콘텐츠 등은 상황을 훨씬 더 복잡하게 만듭니다. 모바일 UI에서 절대적으로 필요하지 않은 것은 제거하는 것이 좋습니다. 좋은 팁은 미니멀리즘을 추구하지만 좋은 사용성을 위협하지 않는 것입니다. 이것은 종종 각 화면에서 하나의 주요 작업의 우선 순위를 지정하여 달성할 수 있습니다.
• 우선 순위 를 지정합니다. 가능한 한 많은 기능을 추가하려고 하는 경향이 있습니다. 우리는 무언가를 남겨두는 것이 사용자에게 더 적은 경험을 제공할 것이라고 생각합니다. 반대로 핵심 목표를 기반으로 기능에 집중하고 가장 많이 사용되는 기능을 분석하여 디자인을 다듬은 다음 이러한 기능을 직관적이고 즐겁게 만들기 위해 노력하십시오.
• 대상을 터치 합니다. 사용자는 무언가를 탭했지만 응답하지 않을 때 물리적으로 화를 내고 모바일 장치를 때릴 수 있습니다. MIT에서 수행된 연구에 따르면 터치 대상이 너무 작은 것을 두드리는 것으로 나타났습니다. 가장 좋은 방법은 컨트롤, 버튼, 링크 등(터치 대상인 모든 것)을 평균 손가락 끝 너비인 7-10mm 이상으로 만드는 것입니다. 이러한 UI 요소 사이에 충분한 간격을 두는 것도 좋은 생각입니다.
• 읽을 수 있는 텍스트 . 사용자가 하는 일은 대부분 콘텐츠 소비를 기반으로 하므로 모든 유형의 모바일 장치에서 일관된 경험을 제공하려면 다양한 크기와 무게에서 잘 작동하는 서체를 선택해야 합니다. 눈의 피로를 줄이기 위해 최소 11포인트의 글꼴 크기를 권장합니다. Google의 Roboto 및 Noto 또는 Apple의 새로운 San Francisco 글꼴과 같은 깨끗하고 읽기 쉬운 서체는 탐색하기에 좋은 선택입니다.
• UI 피드백 . 잘 설계된 응용 프로그램은 상호 작용할 때 정보를 계속 알려줍니다. 좋은 피드백의 부족은 사용자를 혼란스럽게 하고 무언가가 발생했는지, 발생했는지, 또는 발생/발생하지 않은 이유에 대해 질문하게 만들 수 있습니다. 가장 좋은 방법은 UI 요소 또는 앱의 현재 상태를 기반으로 다양한 형태의 피드백(사운드, 햅틱, 시각화)을 사용하는 것입니다.
• 접근성 . 이것은 아마도 사용자 경험 디자인, 특히 모바일 UX 디자인에서 가장 간과되는 측면 중 하나일 것입니다. 세계 인구의 15%가 어떤 형태의 장애를 경험합니다. 웹 콘텐츠 접근성 지침은 무료로 사용할 수 있는 리소스이며 디지털 디자이너에게 도구 상자의 일부로 "필수"입니다.

모바일 UX 디자인 제약

대부분의 UX 디자이너의 목표는 즐거운 경험을 제공하고 발견 가능성(어떤 작업이 가능한지)과 이해(제품이 어떻게 사용되어야 하는지)를 모두 달성하는 훌륭한 디자인을 제시하는 것입니다. 그러나 모바일에서는 이러한 장치가 사용되는 크기, 휴대성 및 환경으로 인해 몇 가지 제약이 따릅니다.

스토리지 제약

기본 모바일 앱을 다룰 때 디자이너는 일부 사용자에게 스토리지 제약이 있을 수 있다는 점을 고려해야 합니다.

웹 앱과 달리 모바일 앱은 모바일 장치에서 바로 스토리지를 사용합니다. 이것은 사용할 수 있는 비디오, 오디오 및 이미지의 품질에 잠재적인 제한을 가져오기 때문에 모바일 UX 디자인에 영향을 줍니다.

네이티브 앱의 경우 스토리지 제약을 고려한 모바일 UX 디자인을 원합니다. 사용자가 스토리지 제한에 부딪히면 무엇을 보관하고 삭제할지 어려운 결정을 내려야 합니다. 사용자가 그러한 선택을 하도록 강요하면 사용자 경험이 좋지 않습니다.

화면 및 컨트롤

모바일 UX 디자인에서 직면하는 또 다른 제약은 화면 크기와 모바일 장치의 컨트롤입니다.

모바일 화면은 더 작습니다. 엿보기 구멍을 통해 읽으면 인지 부하가 ​​증가하고 이해하기가 약 2배 더 어려워집니다. - Jakob Nielsen, 웹 사용성 컨설턴트.

화면과 컨트롤을 처리하는 가장 좋은 방법은 가능한 한 많은 마찰을 제거하는 것입니다. 정보를 재구성하고, 엄지 영역에 주의를 기울이고, 클릭을 줄이고(특히 전자 상거래의 경우), 종종 좌절할 수 있는 로그인 프로세스에 주의하십시오.

환경

모바일 디바이스의 경우 UX 디자인을 위해 고려해야 할 환경적 요소가 있습니다. 사용자는 훨씬 더 자주 오프라인 상태가 될 수 있으며 이러한 상황은 전반적인 사용자 경험에서 고려해야 합니다. 어떻게 그들을 원래 있던 곳으로 되돌릴 수 있습니까? 그들이 하던 일을 처음부터 다시 시작할 필요가 없도록 하려면 어떻게 해야 합니까?

또 다른 환경적 요인은 주의를 산만하게 하는 것입니다. 휴대폰이나 태블릿을 사용할 때 우리는 종종 시끄럽거나 혼잡한 환경에서 집중하기 어렵습니다. 주의를 산만하게 하는 요소가 사용자의 관심을 끌기 위해 경쟁할 때 어떻게 좋은 사용자 경험을 보장할 수 있습니까? 상태를 저장하고 사용자도 상태를 저장할 수 있는 방법이 있습니까?

작은 화면 크기, 단일 창

모바일 UX 디자인에서 디자이너가 직면한 또 다른 제약은 제한된 화면 크기입니다. 이 때문에 사람들은 한 번에 하나의 창만 볼 수 있으며 이는 사용자 경험에 큰 제한을 줍니다.

"멀티 스크린" 및 "멀티 태스킹"을 수용하려는 노력이 있지만 아직 표준이 아니며 고유한 제약 조건이 있습니다.

이 단일 창 제약으로 더 나은 모바일 UX의 핵심은 디자인이 자급자족해야 한다는 것입니다. 사용자가 수행해야 하는 모든 작업은 단일 화면 또는 창 내에서 수행할 수 있어야 합니다. 즉, 정보를 찾기 위해 앱을 떠날 필요가 없어야 합니다.

사용자가 앱을 종료하거나 새 화면을 열어야 하는 경우 전반적인 인지 부하가 ​​증가하여 상황이 너무 복잡하고 답답해집니다.

사람들이 모바일 장치를 잡는 방법

마지막으로 알아야 할 제약 사항이 있습니다. 가제트를 유지하는 것입니다. 사람들이 그것을 어떻게 잡고 있으며 이것이 모바일 UX 디자인에 의미하는 바는 무엇입니까?

Steven Hoober의 연구에 따르면 Design for Fingers, Touch, and People, Part 2에 설명된 대로 사람들이 기기를 잡는 방식에 따라 기기와 다르게 상호 작용한다는 사실이 발견되었으며, 이는 이후 모바일 UX 디자인에 영향을 미칩니다.

사람들은 다양한 방법으로 모바일 장치를 잡고 항상 위치를 바꿉니다. 이는 사용하는 손가락과 모바일 UI와 상호 작용하는 방식에 영향을 미칩니다(아래 참조). 결과적으로 사용자는 화면 중앙을 선호하고 가장자리에 너무 가까운 항목을 클릭하는 것을 좋아하지 않습니다.

다음은 Steven의 연구에서 얻은 몇 가지 추가 모바일 UX 팁입니다.

• 모든 사용자와 모든 유형 및 크기의 모바일 장치를 위한 디자인
• 사람들이 장치를 사용하여 작업하는 모든 다양한 방식을 위한 디자인
• 사용자는 대부분의 경우 화면 중앙을 터치하는 것을 선호합니다.
• 화면의 중간 1/2에서 3분의 2에 주요 동작 배치
• 손가락과 엄지손가락이 콘텐츠를 가리지 않도록 합니다.
• 선택 가능한 항목은 편안하게 두드릴 수 있을 만큼 커야 합니다.

개발자와 협력

애자일/린(lean) UX 환경에서 작업하든 그렇지 않든, 그렇게 세심하게 제작된 디자인을 해석하고 구현해야 하는 것은 개발자입니다. 설계가 의도한 대로 구현되었는지 확인하기 위해 초기에 개발자와 함께 시도되고 진정한 모범 사례를 수립하는 것이 좋습니다. 다음은 몇 가지 제안 및 팁입니다.

모형

모형을 준비하고 전달할 때 파일 이름을 단순하고 일관성 있고 설명적으로 유지하도록 하십시오. 이렇게 하면 앞뒤로 많은 시간을 절약할 수 있습니다. 또한 개발자와 공유하기 전에 모든 모형을 완성하여 각 화면의 한 버전만 받도록 하는 것이 좋습니다. 또 다른 시간 절약 팁은 프로토타입과의 모든 상호 작용을 테스트하여 제대로 작동하는지 확인하는 것입니다. 모형 공유를 위한 좋은 도구: InVision 및 Marvel .

기능 사양

UX 디자이너로서 수행되는 대부분의 작업은 프로젝트 초기에 개발자를 포함하며, 디자인 프로세스에 대한 지속적인 이해를 촉진하고 더 나은 커뮤니케이션 라인을 만드는 좋은 방법은 기능 사양 문서 또는 "Func -투기."

Func-Spec 문서는 설계 프로젝트 전반에 걸쳐 개발자와 공유되고 개발자가 애플리케이션 또는 웹 사이트가 어떻게 작동할지(vs. UI가 어떻게 보일지) 이해할 수 있다는 점을 제외하면 건축가가 만드는 청사진과 유사합니다.

작동하는 Func-Spec의 좋은 예는 다음과 같습니다.

복사

일반적으로 개발자에게 전달해야 하는 모형 외부에 있는 복사본이 많이 있습니다. 다음은 그들이 분명히 감사할 아이디어입니다.

위에서 볼 수 있듯이 컨텍스트 는 개발자가 메시지가 나타나거나 사라져야 하는 시기를 이해하는 데 도움이 됩니다. 개발자에게 무슨 일이 일어나고 있는지 알려야 추측할 필요가 없습니다. 메시지 는 나타날 실제 사본입니다. 횡설수설(예: lorem ipsum)이 아닌 실제 사본을 사용하십시오. 개발자는 카피라이터를 원하지 않으며 우리는 개발자를 위해 가능한 한 원활하게 작업을 수행하기를 원합니다.

명세서

이것은 개발자와 디자인을 소통할 때 가장 중요한 부분 중 하나입니다. Zeplin 및 InVision의 Inspect 와 같은 도구는 측정, 스타일 가이드, 글꼴, 사용자 경험 흐름 및 디자인의 모든 부분이 작동하는 방식과 같은 사양을 전달하기 때문에 정말 빛나는 곳입니다.

통신 IRL(실생활에서)

디자이너는 도구를 좋아합니다. 전화를 받거나, 화상 통화를 시작하거나, 개발자에게 걸어가서 이야기하는 것을 잊어버리기 쉽습니다. 질문이나 뉘앙스가 그 자리에서 논의될 수 있기 때문에 디자인의 일부를 전달한 후 개발자와 단순히 만나서 많은 시간이 절약되었습니다. 이것은 종종 잊히지만, 일반적인 핸드오프 프로세스의 일부로 포함된다면 모두가 절약된 시간에 감사할 것입니다.

모든 것을 함께 묶기

모바일은 사라지지 않습니다. 2016년에는 모바일 장치에서 웹에 액세스하는 사용자의 수가 처음으로 데스크톱 사용을 넘어섰습니다. UX 디자이너의 경우 모바일 채택이 증가하고 다양한 장치 유형이 확산됨에 따라 사용자 경험 디자인이 훨씬 더 어려워질 것입니다.

이러한 이유로 일련의 모범 사례를 준수하고 모바일이 도입하는 제약을 이해하고 개발자와 원활한 작업 관계를 제공하는 것이 긍정적인 인간 경험을 만드는 디자인을 달성하는 데 핵심 요소가 될 것입니다.

• • •

Toptal Design 블로그에 대한 추가 정보:

• 디자인 원칙과 중요성
• 최고의 UX 디자이너 포트폴리오 – 영감을 주는 사례 연구 및 사례
• 디자인의 게슈탈트 원리 탐구
• Adobe XD vs. Sketch – 어떤 UX 도구가 당신에게 적합합니까?
• 최고의 디자이너가 사용하는 10가지 UX 결과물