모바일 앱 디자인의 10계명
게시 됨: 2017-09-20당신은 일을 너무 복잡하게하지 마십시오
Google Play 스토어에는 340만 개 이상의 앱이 있으며 Apple App Store에는 200만 개 이상입니다. 즉, 평균적으로 하루에 3,389개의 앱이 Google Play 스토어에 추가되고, Apple은 조금 더 선별적이지만 여전히 매일 1,557개의 앱이 App Store에 추가됩니다.
매일 쏟아지는 홍수 속에서도 앱을 돋보이게 하려는 모바일 앱 디자이너라면 아름답고 사용하기 좋은 제품을 만들어야 합니다.
성공적인 앱을 디자인하기 위해 최선을 다하고 있는지 확인하기 위해 약간의 지침이 필요하십니까? 산을 오를 필요가 없습니다. 모바일 앱 디자인에 대한 10가지 계명이 바로 여기에 있습니다.
당신은 일을 너무 복잡하게하지 마십시오
앱 디자이너는 쉽게 빠져들게 됩니다. 새로운 앱을 시장에 출시할 때 (현재로서는) 꼭 필요하다고 느끼는 모든 종류의 기능을 쑤셔 넣어야 한다는 생각이 듭니다. 팀과 함께 프로젝트를 수행할 때 특히 그렇습니다. 아무도 다른 사람의 아이디어를 끊임없이 도끼를 들고 있는 사람이 되기를 원하지 않습니다. 그러나 주변에 추가 기능을 포함하는 모바일 앱 디자인은 종종 사용자 혼란과 어수선하고 초점이 맞지 않는 UI로 이어집니다.
“모바일 사용자는 매끄럽고 빠른 사용자 경험을 원합니다. 많은 추가 단계를 통해 앱을 로드하거나 제품에 대한 데스크톱 경험을 복사하는 것은 잘못된 디자인 접근 방식입니다.”라고 Geeks Chicago의 사장인 Mark Tuchscherer는 말합니다. "모바일 사용자는 다른 무엇보다 미니멀한 접근 방식을 수용할 것입니다."
우리는 동의합니다. 필요한 기능으로만 기능을 제한하고 사용하는 동안 UI에 유사한 사고방식이 반영되도록 하십시오. UI는 사용자가 필요로 하는 것을 정확히 수행해야 합니다.
당신은 당신의 디자인이 접근 가능한지 확인해야 합니다
이전에 말했듯이 접근성은 단순히 있으면 좋은 것이 아니라 앱에 반드시 있어야 하는 중요한 기능입니다. 솔직히 말해서, 접근성을 모바일 앱 디자인의 최전선에 두지 않는다면 다시 드로잉 보드로 돌아가야 합니다.
첫째, 5,700만 명의 미국인이 장애가 있다는 점을 감안할 때 대표적인 청중을 확보하는 것이 절대적으로 필요합니다. 사실, 인터넷에는 청각 장애를 가진 미국인이 전 세계 이탈리아인보다 더 많습니다. 시각 장애가 있는 미국인도 마찬가지입니다. 명심하십시오. 그것은 미국인일 뿐입니다!
그 외에도 접근 가능한 디자인은 단순히 좋은 디자인입니다. Apple과 Android 모두에서 제안하는 접근성 디자인 모범 사례는 UI 컨트롤에 정확한 레이블 지정, 포커스 기반 탐색 제공, 오디오 전용 앱 피드백 방지와 같이 어쨌든 절대적으로 수행해야 하는 사항을 강조합니다.
물론 Android용인지 iOS용인지에 관계없이 앱을 광범위한 청중과 함께 테스트해야 합니다. 사무실에 그냥 넘기지 말고 다양한 사람들에게 전달하십시오. 마지막으로 원하는 것은 대부분의 시장에서 앱을 사용할 수 없게 하는 것입니다.
바퀴를 재발명하지 마십시오
많은 장치가 있을 수 있지만 거의 모든 사람이 따르는 몇 가지 보편적인 디자인 및 UX 단서가 있습니다. 앱 사용 경험을 고려하십시오. 화면과 상호 작용할 때 특정 일이 발생할 것으로 예상합니다. 일부 앱에서는 엄지손가락을 위로 밀면 메뉴가 측면에서 튀어나올 것으로 예상할 수 있습니다. 다른 사람들에게는 드래그 앤 드롭으로 물체를 움직이는 것과 같이 논리적이고 친숙한 터치 제스처를 의미할 수 있습니다.
이미 공개된 UI 요소를 기반으로 앱을 단편적으로 구성하는 것이 아니라 사용자가 앱 경험에서 무엇을 기대하는지 알고 있어야 합니다. 추가하는 모든 새로운 요소는 맞춤형 온보딩 프로세스 또는 직관적인 학습을 통해 설명해야 합니다. 이는 사용자에게 추가적인 복잡성을 추가합니다. 다른 선택지가 전혀 없는 경우가 아니면 피해야 합니다.
이렇게 생각해 보세요. 사진 검색을 위해 앱을 다운로드했고 화면과 완전히 새로운 상호 작용 방식(예: 익숙하지 않은 제스처 사용)을 배워야 하는 경우 계속 사용하시겠습니까? 그것? 이미 익숙한 제스처를 사용할 수 있는 다른 앱이 있다면 어떨까요?
경쟁자와 차별화하기 위해 관습을 버리지 마십시오. 새로운 요소를 추가하는 것이 불가피하고 앱 경험에 무언가를 추가하지 않는 한 항상 사용자에게 익숙한 디자인 언어 내에서 작업해야 합니다.
당신은 항상 당신이 디자인하는 사람을 기억해야합니다
사진 작가를 위한 모바일 사진 편집 앱을 디자인한다면 유아를 위한 단어 암기 게임을 디자인할 때와 다른 우선순위를 갖게 될 것입니다. 당신이 디자인하는 모든 청중은 다른 기대치를 가질 것이고, 각각은 다른 유형의 디자인에 반응할 것입니다.
앱의 가상 사용자를 위한 페르소나를 개발하여 사람들이 앱과 상호 작용하는 방식을 모델링하는 것이 도움이 될 수 있습니다. 당신은 전문가를 위해 디자인하고 있습니까? 학생? 의사? 기업? 중소기업? 고객이나 직원이 사용하도록 설계된 무언가를 만들고 있습니까? 프로그래머 또는 디자이너? 음악가 또는 주자?
디자인 스케치를 시작하기 전에 무엇을 만들고 있는지, 누구를 위해 만들고 있는지 정확히 알아야 합니다. 목표와 대상 인구 통계를 "여행 애호가를 위한 데이트 앱"이라는 간단한 문구로 요약할 수 있어야 합니다. “초보 프로듀서를 위한 스튜디오 믹싱 앱.” "IT 전문가를 위한 네트워크 진단 도구입니다."
당신을 위해 추천 된:
그렇게 하는 데 어려움을 겪고 있다면 그 이유를 생각해 보십시오. 사용자를 위한 최고의 경험을 만드는 데 정말로 집중하고 있습니까, 아니면 그저 멋있어 보이는 것을 디자인하려고 노력하고 있습니까? 목표의 초점을 절대 잃지 마십시오.
불쾌하지 않은 글꼴을 사용해야 합니다.
이 디자인 죄는 우리 모두가 경험한 것입니다. 그것이 앱에 있든, 진료실의 레터헤드에 있든, 아니면 PowerPoint 슬라이드에 있든 상관 없습니다. 글꼴이 속하지 않는 경우 우리는 알아차립니다.
Comic Sans 또는 Papyrus의 몰락에 대해 모바일 앱 디자이너가 디자인에 사용하는 글꼴에 조금 더 주의를 기울일 것이라고 생각할 만큼 충분히 작성되었지만 항상 그런 것은 아닙니다. 그리고 단순히 몇 가지 나쁜 글꼴을 피하는 것만으로는 앱을 아름답게 만드는 데 충분하지 않습니다. 앱에 적합하고 UX를 손상시키지 않는 글꼴을 찾아야 합니다.
Pointman의 수석 UX/UI 엔지니어인 Mike Spencer는 "타이포그래피는 사용자 경험의 필수적인 부분이므로 깨끗하고 단순한 웹 글꼴을 사용하는 것이 중요합니다."라고 말합니다. "저는 모바일 앱용으로 산세리프체를 선호하지만 정말 중요한 것은 디자인에 맞고 가독성이 좋다는 것입니다."
일관성을 유지하십시오
디자인을 선택하고 앱 전체에서 이를 고수해야 합니다. 일부 선택 화면에서 슬라이드 아웃 사이드 패널로 갑자기 전환하기 전에 모든 페이지에 상단 탐색 모음이 표시되지 않습니다. 스플래시 화면에 부드러운 흙 톤을 사용하지 말고 로드되면 파스텔로 전환하십시오. 앱의 한 버튼에 일정한 양의 패딩이 있는 경우 모든 버튼에 동일한 패딩이 있어야 합니다. 앱은 전체적으로 통일된 느낌을 가져야 합니다. 그렇지 않으면 사용자에게 거슬리고 불쾌할 수 있습니다.
일관성을 유지하는 것은 단지 미학에 관한 것이 아닙니다. 사용하는 디자인 요소는 잠재 사용자에게 앱에 대한 정보를 미묘하게 가르칩니다. 갑자기 규칙을 변경하면 규칙을 무시하고 혼동하게 될 것입니다.
귀하의 앱과 유사한 다른 앱이 있는 경우 해당 앱이 디자인적으로 무엇을 하는지 기록해 두십시오. 이를 통해 사용자가 앱에 어떤 기대치를 갖게 될지 알 수 있습니다. 모든 Google 앱이 일관된 모양을 가지고 있음을 알 수 있습니다. Apple도 마찬가지입니다. 특정 회사나 산업을 위해 디자인하는 경우 앱이 해당 스타일과 일치하는지 확인하세요. 마찬가지로, 특정 산업을 위한 앱을 구축하는 경우 해당 산업에 대해 미학적으로 "올바른" 느낌을 주어야 합니다.
모바일을 염두에 두어야 합니다.
모바일 앱 디자인은... 음, 모바일입니다. 그럼에도 불구하고 많은 디자이너는 사용자가 손가락(대부분의 경우 엄지손가락만 사용)으로 앱을 탐색한다는 사실을 잊는 것 같습니다. 지난 몇 년 동안 휴대전화가 더 커졌지만 한 손으로 사용할 수 있어야 하는 사용자와 사용 사례가 여전히 많이 있습니다.
또한 사용자가 있을 환경에 대해서도 생각해야 합니다. 사용자가 움직이는 차량에 앉아 있거나 걷는 동안 버튼을 탭할 수 있습니다. 너무 많은 버튼이 너무 가깝게 쌓여 있거나 화면이 불필요한 디자인 요소로 어수선하면 앱을 이해하기 어렵고 사용하기 불편할 것입니다. 사용자가 필요한 기능을 찾고 오른쪽 버튼을 쉽게 누를 수 있도록 UI가 깨끗하고 정돈되어 있어야 합니다.
각각 OneSpring의 CIO이자 CEO인 Robert Grashuis와 Jason Moccia는 사용자가 앱을 탐색하는 데 도움이 되도록 부정적인 공간을 많이 사용하는 것이 중요하다고 말합니다. “화면에 너무 많은 활동이 있으면 독자의 주의가 산만해집니다. 여백을 적절하게 사용하여 어수선함을 줄이고 사용자가 집중할 수 있도록 하세요.”
사용자 흐름을 기억해야 합니다.
디자인이 아무리 깔끔해도 앱에 자연스러운 흐름이 없으면 사용자를 확보할 수 없습니다. 모바일 앱 디자인을 시작하기 전에 다음과 같은 몇 가지 기본적인 질문을 스스로에게 던져야 합니다.
- 귀하의 앱은 사용자에게 어떤 목적을 제공합니까?
- 필요한 기능에 도달하기 위해 어떻게 탐색할 것인가?
- 몇 페이지를 구문 분석해야 합니까?
- 특정 버튼에 액세스하려면 메뉴를 몇 번 클릭해야 합니까?
- 가장 접근하기 쉬워야 하는 기능은 무엇입니까?
이렇게 하면 각 페이지에 포함되어야 하는 내용을 정확히 보여줌으로써 디자인을 안내하는 데 도움이 될 수 있습니다. 이상적으로는 이 단계가 앱 스케치(또는 프로토타입 제작)를 시작하기 전에 이루어져야 합니다. 빈 문서나 종이에 다양한 작업에 대한 사용자 흐름을 매핑할 수 있습니다. 예를 들어 음악가가 악기를 조율하는 데 도움이 되는 앱을 디자인하는 경우 다음과 같은 흐름이 있을 수 있습니다.
메인 화면 > 악기 선택 [Guitar] > 튜닝 선택 [Standard] > 스트링 선택 [E]
일반적인 작업의 흐름을 단순화하기로 결정할 수 있습니다. 예를 들어 튜너를 사용하면 사용자가 특정 악기와 튜닝 조합을 기본 화면의 버튼에 저장할 수 있습니다. 선호하는 악기와 튜닝을 선택하면 흐름은 다음과 같습니다.
메인 화면 > 저장된 악기/튜닝 > 스트링 선택 [E]
이와 같은 사용자 행동을 매핑하면 자연스럽게 흐르는 앱을 디자인하는 데 도움이 될 수 있습니다. 또한 앱의 성공에 중요할 수 있는 특정 디자인 요소를 추가하는 것을 잊지 않도록 합니다.
당신은 현실적인 프로토타입을 만들 것입니다
코딩은 말할 것도 없고 앱을 디자인하는 것은 길고 실망스러운 과정일 수 있습니다. 거의 모든 디자이너나 개발자는 놀라운 디자인을 생각해내고 코딩하여 클라이언트에게 보낸 경험이 있지만 그것이 그들이 원하는 것이 아니라는 말만 들었습니다.
마찬가지로 저글링 스케치는 여기까지만 가능합니다. 냅킨 뒷면에 새긴 것과 실제로 테스트할 수 있는 실제 프로토타입 사이에는 꽤 큰 차이가 있습니다. 스케치가 일반적인 아이디어를 전달할 수 있지만 대화식의 사실적인 프로토타입은 고객이 자리에서 벌떡 일어나게 만들 수 있습니다. 그리고 그들이 그것에 만족하지 않더라도 작동하는 프로토타입은 피드백을 받고 필요한 변경을 훨씬 더 쉽게 만들 것입니다.
Proto.io는 코드를 한 줄도 작성할 필요 없이 "실제" 앱처럼 작동하는 현실적이고 상호작용적이며 구체화된 프로토타입을 디자인할 수 있는 기능을 제공합니다. 그렇게 하면 너무 깊이 들어가기 전에 클라이언트와 QA 팀에게 진정한 실제 경험을 제공할 수 있습니다.
그리고 QA에 대해 말하자면…
당신은 시험할 것입니다 — 그런 다음 더 많은 것을 시험하십시오
사실, 이 블로그 게시물의 개요를 처음 시작했을 때 우리는 1 – 10번의 "테스트"를 하고 싶었습니다. 이것이 QA가 얼마나 중요한지입니다. 이것은 분명해야 하는 것입니다. 사실, 지구상의 거의 모든 개발자나 디자이너는 테스트가 매끄러운 UX를 만드는 데 중요하다고 말할 것입니다.
그럼에도 불구하고 우리 모두는 앱을 다운로드하고 얼마나 심하게 실행되는지에 대해 완전히 당황한 동일한 경험을 한 적이 있습니다. 아마도 휴대폰에서 제대로 부팅되지 않거나 온보딩 프로세스가 너무 끔찍하여 즉시 삭제할 수 있습니다. 그것. 또는 기술적으로 잘 작동하지만 의미가 없는 디자인 요소나 읽을 수 없는 텍스트가 있을 수 있습니다.
앱에 치명적인 결함이 없더라도 사용자는 변덕스러울 수 있습니다. 작은 실수 하나만으로도 앱을 다시는 사용하지 않을 수 있습니다. 이를 방지하려면 프로세스 전체에서 앱을 테스트하세요. 첫 번째 프로토타입부터 검증을 위해 출시 준비된 앱을 보내는 순간까지 항상 수정하거나 개선할 점을 찾아야 합니다.
이 10가지 규칙이 올바른 방향을 유지하도록 도와줄 것이지만, 모바일 앱 디자인은 가이드를 따르거나 할 일 목록에서 항목을 확인하는 것만이 아닙니다. 창의력을 발휘해야 합니다. 최고의 앱은 복잡한 문제를 찾아 우아하게 해결합니다.
[이 게시물은 Proto.io 에 처음 게시되었으며 허가를 받아 복제되었습니다.]