모바일 UX를 빛낼 수있는 5 가지 디자인 요령

/2015-06-19 04:16:06/
Jeiren
/변하기 쉬운/

최근 웹 사이트 분석을 보셨습니까? 사용자의 절반 이상이 모바일 장치를 통해 웹 사이트를 방문 할 가능성이 높습니다.

웹 사이트 나 앱에 모바일 노력을 집중하든 관계없이 디자인이 모바일 사용자 모두에게 탁월한 사용자 환경을 제공하도록해야합니다. 처음부터 시작하지 않아도됩니다. 모바일 사용자와 디자인과의 상호 작용 방식을 생각하면 인터페이스의 모양과 기능을 구체화하는 데 도움이됩니다.

다음은 사용자가 좋아하는 모바일 UX를 만들기 위해 사용할 수있는 5 가지 디자인 트릭입니다.

Envato Elements 살펴보기

1. 네비게이션 간소화

구식 메가 내비게이션 메뉴는 특히 모바일과 관련하여 호의를 보이지 않습니다. 모바일 사용자는 모든 사용자 그룹의 관심이 가장 짧을 수 있습니다. 웹 사이트 나 앱을 열고 바로 필요한 것을 찾습니다.

몇 가지 옵션만으로 탐색 메뉴를 디자인하십시오. 분석을 통해 대부분의 사용자가 무엇을 찾고 있는지 먼저 탐색하십시오.

옵션이 적을수록 화면 공간이 줄어들므로 디자인에 더 많은 공간을 통합 할 수있어 터치 및 가독성에 이상적입니다.

여기서 햄버거 아이콘의 장점을 논하지는 않지만 튀어 나온 내비게이션은 사용자에게 익숙한 패턴입니다. 탐색 메뉴를 팝업 또는 슬라이드 아웃하려는 경우 사용자에게 명확한 시각적 식별자가 있는지 확인하십시오.

Ebates 앱은 두 가지 수준의 탐색을 사용합니다. 하나는 최고 거래 목록이고 다른 하나는 즐겨 찾기 상점의 즐겨 찾기 목록 (햄버거 / 심장 아이콘)입니다. 두 옵션 모두 무겁지 않습니다. 내용과 거의 비슷하게 보이고 기능합니다. 전체 디자인은 압도적 인 느낌없이 탐색입니다.

2. 제스처 (및 햅틱)에 대해 생각

모바일 사용자는 데스크톱 사용자와 다른 방식으로 장치와 상호 작용합니다. 사용자 인터페이스가이를 설명해야합니다.

디자인은 특정 동작을 수행하기 위해 제스처를 활용해야합니다. 일반적이고 직관적 인 컨트롤을 사용하는 인터페이스는 사용자를 기쁘게합니다.

이러한 제스처에는 다음이 포함됩니다.

두 번 탭
프레스
보류
끌어서 놓기
스크롤 (단일 및 두 손가락)
확대 및 축소
강타
영화

모바일 제스처는 새로운 클릭입니다.

터치 인터랙션에 대해 생각할 때 햅틱을 잊지 마십시오. 웨어러블에서 나오는 미묘한 "범프"또는 주머니에서 휴대폰의 진동은 햅틱 알림, 진동 또는 동작을 사용한 터치의 기계적인 시뮬레이션입니다.

햅틱의 요령은 상호 작용이 미묘하고 눈에 거슬리지 않는다는 것입니다. 사용자는 알림이 있다는 것을 알고 있지만 다른 사람들은 그렇지 않습니다. 터치 인터페이스는 항상 보편화되고 있으며 사용자들로부터 긍정적 인 반응을 얻고있는 것 같습니다.

예를 들어, Two Dots 게임은 특정 방식으로 점을 지울 때마다 범프를 사용합니다. 소리없는 옵션은 신중한 게임 플레이를 가능하게하며 사용자에게 즐거운 경험을 제공합니다.

3. 대화하기

사람들은 다른 사람들과 대화하고 상호 작용하는 것처럼 느끼고 싶어합니다. 고맙게도 디자이너에게는 인공 지능과 챗봇을 터치하여 이러한 상호 작용을 만들 수 있으므로 하루 24 시간 라이브 채팅 세션을 대기하지 않아도됩니다.

대화식 UI를 만드는 세 가지 방법이 있습니다.

인터페이스 전체에보다 개인적인 접촉이 가능한 사본을 작성하십시오. 긴 텍스트 블록에서 작은 비트의 현미경에 이르기까지 텍스트는 위의 WTFWeather 앱과 같이 개성이 있어야합니다. 사람들이 말하는 방식으로 읽어야합니다. 메시징에서 지나치게 형식적이거나 로봇 적으로 들리는 것을주의하십시오.
메시징 기능 또는 챗봇을 사용하여 사용자와의 즉각적인 상호 작용을 만듭니다. 이는 훌륭한 고객 서비스 도구가 될 수 있으며 누군가가 항상 문제를 해결하도록 도와주는 고객 충성도를 창출하는 데 도움이됩니다.
음성 사용자 인터페이스를 디자인에 통합합니다. Siri와 Alexa는 음성 인터페이스 덕분에 세대 이름입니다. 음성 명령을 통합하는 또 다른 보너스? 웹 사이트 나 앱의 접근성을 향상시킵니다.

4. 애니메이션

방문하는 거의 모든 웹 사이트에 애니메이션 요소가있는 것 같습니다. 그리고 그것은 의도적으로 설계된 것입니다. 애니메이션은 디자인에 생명을 불어 넣을 수 있습니다.

애니메이션 요소는 사용자의 관심을 끌고 사용자에게 디자인과 더 효과적으로 상호 작용하는 방법을 보여 주므로 매우 매력적입니다. (디자인을 만들 때 "표시, 말하지 말라"라는 고전적인 아이디어로 되돌아갑니다.)

예를 들어 Google지도에는 애니메이션이 거의 없습니다. 다음에 사용할 때는주의하십시오.

UX Planet 용 Nick Babich는 모바일 UI 디자인에서 애니메이션 사용에 대한 입문서를 가지고 있습니다. 그는 모션을 잘 사용하는 방법에 대한 세 가지 주요 용도를 설명했습니다.

시스템 상태 : 애니메이션을 사용하여 로딩 상태, 컨텐츠 새로 고침 및 알림을 표시합니다.
탐색 및 전환 : 애니메이션을 사용하여 사용자가 여러 유형의 컨텐츠 사이를 이동하고 요소간에 시각적 계층을 설정하고 상태 변경을 표시 할 수 있습니다.
시각적 피드백 : 애니메이션을 사용하여 동작의 승인을 표시하거나 동작 결과를 시각화합니다.

5. 선상에서 올바른 양식 사용

특히 앱에서는 온 보딩이 사용자 충성도에 매우 중요합니다.

마지막으로 다운로드 한 게임을 생각해보십시오. 바로 뛰어 들었어? 아니면 성공을 위해 빠른 튜토리얼이 필요 했습니까?

앱에 대한 대화 형 온 보딩 경험은 사용자 경험에 포함 된 기능을 최대한 활용하는 방법을 배우는 데 도움이됩니다. 재미있는 옵션은 충성도 높은 사용자로 전환하는 데 도움이됩니다. 온 보딩 자습서를 짧게 유지하고 자주 묻는 질문이나 도움말 섹션을 포함시켜 사용자가 문제가있는 경우 다시 방문 할 수 있도록하십시오.

모바일 웹 사이트에서 온 보딩은 주요 관심사가 아니지만 가입 또는 등록 양식이 문제가 될 수 있습니다. 휴대 기기의 양식은 간단하고 쉬워야합니다. 사용자는 복잡한 복잡한 양식을 좋아하지 않습니다.

모바일에서 양식을 간소화하여 전환율을 높입니다. 나중에 언제든지 추가 정보를 요청할 수 있습니다.

위의 GoodRx의 간단한 시작점을 살펴보십시오. 더 알고 싶은 약만 요구합니다. 형태는 초점이며 매우 간단합니다.

단 하나의 정보, 즉 이메일 주소를 요구하십시오. 이것이 사용자와의 관계를 시작하는 데 필요한 전부입니다. 사이트 나 앱에 로그인이 필요한 경우 이메일 주소와 비밀번호를 사용하십시오.

크기 측면에서 상자를 쉽게 채울 수 있도록 양식을 디자인하고 자동 완성 기능을 버려 전자 메일 주소가 잘못 입력 될 가능성을 줄이십시오. 하나 더 트릭? 프로세스를 더욱 단순화 할 수있는 경우 소셜 로그인 양식을 사용하십시오. 사용자는이 프로세스에 익숙하며 사용하기 쉬우 며 오류가 거의 없습니다.