예쁜 앱 디자인에 대한 반론

게시 됨: 2022-03-11

"칭찬을 구하거나 칭찬을 받는 허영심을 경계하십시오." – 차머스

과장된 시선을 사로잡는 비판적인 UX-ray 눈으로 디자인 영감을 주는 사이트를 서핑하고 있습니다. :) 저는 종종 귀에서 연기가 피어오르면서 자리를 떠납니다. 제목에서 알 수 있듯 이것은 횡설수설이지만 너무 심각하게 받아들이지는 마십시오. 나는 요점을 만들려고 해요.

예, 이러한 디자인 쇼케이스 사이트 중 일부가 반드시 실제 제품을 위한 것이 아니라는 것을 알고 있지만, 여전히 주로 "이것은 누구를 위한 것입니까?"라는 주요 질문을 통해 디자인에 대한 사려 깊은 접근 방식을 반영해야 한다고 말합니다. ', '사람들이 내 제품을 어떻게 사용할 것인가', '실제로 사용할 수 있을까?

최신 유행을 따르고 기본적인 사용성 규칙, UX 모범 사례 및 상호 작용 디자인의 기본 원칙을 노골적으로 무시하는 피상적인 앱 디자인은 현실 세계에서 실패할 가능성이 가장 높습니다! 운 좋게도, 그들은 일반적으로 Dribbble과 Behance에서 일반적으로 우스꽝스럽고 스스로 패러디하는 환상의 나라를 넘어서지 않습니다.

불행히도 가상 앱의 단일 화면인 이러한 "컨셉 디자인"은 디자이너라는 레이블이 붙은 디자이너를 베니어판, 예쁜 색상 및 서체에만 관심이 있는 가장하는 사람으로 영속시키는 역할을 합니다. 오늘날 모든 앱 디자인은 그 이상이어야 합니다.

저는 UX에 대해 이야기하고 있습니다.

현실 세계의 사람들이 실제로 이러한 앱을 사용하려고 하면 50% 이상이 그렇게 하는 데 어려움을 겪고 나중에 혼란에 빠져 포기할 것이라고 장담합니다.

날씨 앱 - 잘못된 앱 디자인
또 다른 날씨 앱이 필요하지 않은 사람은 누구입니까? 사용자에게 사용 방법에 대한 단서가 없습니다. (드리블의 조나 딩스)

가치가 있고 게임을 향상시키려는 디지털 제품 디자이너는 자존심을 문 앞에 두고 불필요한 번창, 이기적인 대중 행진, 무의미한 청중 유혹을 피하는 것이 중요하다는 것을 알고 있습니다. #UX실패!

여행 앱 디자인 - 나쁜 앱 디자인
멋진 GIF 애니메이션이 아무리 많아도 숨겨진 제스처 상호 작용, 의미 없는 아이콘 또는 대비가 낮은 텍스트와 같이 잘못 설계된 앱의 심각한 사용자 경험 문제를 해결할 수 없습니다. (Dribbble에서 Arunraj의 여행 앱)

아첨을 위한 유용성 포기

디지털 제품 디자인이 시장에서 성공하려면 훌륭한 사용자 경험이 필수입니다. 확실히 미적 감각—멋진 모양과 느낌의 디자인이 중요하지만 사용하는 즐거움도 있는 사용 가능한 제품을 보완하는 마지막 터치일 뿐입니다. 사용성을 포기하고 미적 완벽함만을 추구하는 것은 궁극적으로 패자의 게임입니다.

종종 "실행 가능한 기술의 구루"라고 불리는 Don Norman이 말했듯이 "훌륭한 디자이너는 즐거운 경험을 만듭니다."

즐거운 경험은 유동적이고 끊김 없는 상호 작용 및 예상되는 경험을 제공하면서 마찰을 최소화하는 경험입니다(즉, 마치 마술처럼 사물이 나타나도록 하는 것. 올바른 일을 적절한 순간에 올바른 방식으로).

거기에 도달하는 방법은 확립된 모범 사례와 디자인 규칙을 무시하고 단순히 외관에만 집중하는 것이 아닙니다. Dribbble은 1) 사용자를 이해하지 못하고 2) 유행을 따라하고 있습니다.

모바일 앱 UX 디자인 모범 사례
당신의 디자인은 이러한 질문을 던지고 있습니까?

위험에 처한 규칙을 무시하십시오

디지털 제품 디자인이든 산업 디자인이든(예: 자동차나 자전거) 디자인 규칙은 인간 행동, 역학, 물리학, 과학 및 광범위한 연구에 뿌리를 두고 있습니다. 그들은 모범 사례와 일이 어떻게 작동하는지에 대한 인간의 기대를 따릅니다. 왜냐하면 우리는 이러한 관습을 오랫동안 따랐기 때문입니다. 이것들은 시행착오를 거쳐 만들어졌으며 시간이 지남에 따라 매우 효과적인 것으로 입증된 규칙입니다. 약간 진화처럼.

디자인 규칙을 무시하거나 위반하는 것은 무모하고 다소 오만합니다. 그것들은 근본적이며 우리가 혁신할 수 있는 토대 역할을 합니다. 그것은 예상되는 것에 관한 것입니다. 그것들이 없으면 사람들을 짜증나게 할 위험이 있습니다. 모든 자전거, 모든 도어 핸들, 또는 모든 자동차의 페달과 핸들이 완전히 "혁신"이라는 이름으로 다르게 작동한다고 상상해 보십시오.

두 단어: 총체적 난국.

사용자 인터페이스는 농담과 같습니다. 설명해야 하는 경우 작동하지 않습니다.

모바일 UX 디자인 팁과 요령
Dribbble의 또 다른 앱 디자인. (Aaron 1991 on Dribbble)

휴리스틱을 염두에 두십시오

사용 가능한 제품을 위해 노력하는 잘 디자인된 앱은 잘 정립된 디자인 규칙, 기본 사용성 지침 및 상호 작용 디자인 원칙(무엇보다도)을 따르고 탁월한 색상으로 경험적 평가를 통과합니다. ("휴리스틱"은 특정 사용성 지침이 아니라 광범위한 경험 법칙이기 때문입니다.)

앱 디자인이 실제 세계에서 잘 작동하려면 20년 동안 사용자 경험 분야의 선두 주자인 Nielsen Norman Group이 정의한 사용자 인터페이스 디자인을 위한 10가지 사용성 휴리스틱을 준수해야 합니다. 이것들은:

  1. 시스템 상태의 가시성
  2. 시스템과 현실 세계의 일치
  3. 사용자 제어 및 자유
  4. 일관성 및 표준
  5. 오류 방지
  6. 회상보다 인정
  7. 사용의 유연성과 효율성
  8. 미학적이고 미니멀한 디자인
  9. 사용자가 오류를 인식, 진단 및 복구할 수 있도록 지원
  10. 도움의 가용성(“빠른 둘러보기” 또는 둘러보기일 수 있음)

여기에서 인터랙션 디자인을 위한 10가지 일반 원칙에 대해 자세히 읽어보세요.

혁신이라는 이름의 열광

종종 앱 컨셉 화면은 Dribbble의 데일리 핫샷 섹션까지 올릴 목적으로 포트폴리오 쇼케이스 사이트에서 많은 좋아요를 원하는 디자이너에 의해 디자인됩니다. 화려하고 미니멀한 UI 디자인 몇 가지는 제품이 아닙니다. 이는 자동차의 나머지 부분이 어떻게 생겼는지 또는 실제 시나리오에서 어떻게 작동하는지에 대한 아이디어를 제공하지 않고 자동차 도어를 설계하는 것과 유사합니다.

모바일 앱 디자인 모바일 UI 디자인 모범 사례
Dribbble의 거래 앱 디자인. 미스터리 아이콘과 대비가 낮은 텍스트로 가득한 메뉴가 한두 개가 아닙니다.

오해하지 마세요! 디자인 혁신이 필요합니다. 모든 분야 또는 창의적인 영역이 번성하는 것은 건강하고 중요합니다. 그러나 좋은 UX를 희생시키면서 그런 일이 일어나서는 안 됩니다. 여기서 구별하여 디자인 실험이라고 부르겠습니다. 깨끗하고 미니멀한 디자인이라는 가식 아래, 단지 다르고 멋져지기를 바라는 이 사이트에서 행진하는 소위 혁신적인 디자인의 대부분은 기본적인 사용성을 희생합니다.

사용성 101

뛰어난 사용자 경험의 기반인 사용성은 사용자 인터페이스가 얼마나 사용하기 쉬운지를 평가하는 품질 속성입니다. 사용성 이라는 단어는 디자인 과정에서 사용 편의성을 개선하기 위한 관행을 의미하기도 합니다.

앱이 유용한지 여부는 유용성과 사용성 측면에서 정의됩니다. 유틸리티는 사용자에게 필요한 기능을 제공합니다. 유용성은 그러한 기능을 사용하는 것이 얼마나 쉽고 즐거운가입니다. 따라서 이러한 기본 사용성 원칙을 무시하는 멋진 앱 디자인은 정의상 무용지물이 됩니다.

디자이너가 앱의 탐색을 디자인하는 혁신적이고 흥미로운 방법을 찾고 있다는 것은 이해할 만합니다. 그러나 예상치 못한 것과 사용할 수 없는 것 사이에는 미세한 선이 있습니다. 탐색 디자인에서 고려해야 할 세 가지 사항은 일관성, 사용자 기대치, 컨텍스트 단서입니다. 예를 들어 앱 컨셉 디자인이 얼마나 멋진 전자 상거래인지는 중요하지 않습니다. 사용자가 제품을 찾을 수 없으면 구매할 수 없습니다.

유용한 디자인

스티브 잡스가 말했듯이, “모양과 느낌만 그런 것이 아닙니다. 디자인은 작동 방식입니다.”

그는 유용한 디자인 에 대해 이야기하고 있었습니다.

디자이너가 작동 방식에 대한 사람의 멘탈 모델을 너무 많이 망치면 앱이 실패합니다. 사용자의 멘탈 모델과 개념 모델 사이에 큰 불일치가 있으면 앱은 건배입니다. 멘탈 모델은 이름에서 알 수 있듯이 사람들의 마음 속에 있는 개념적 모델로 사물이 작동하는 방식에 대한 이해를 나타냅니다.

인터랙션 디자인의 가장 기본적인 원칙 중 하나는 UI가 유용하려면 기표가 있어야 한다는 것입니다. 사용자가 사용 가능한 동작이나 제스처 상호 작용을 나타내는 시각적 신호가 UI에 없는 경우( 기표 라고 함) 제품 디자인은 DOA입니다.

디자이너인 당신이 당신의 제품에 열광하는 만큼 사용자는 유용성을 훨씬 더 중요하게 생각합니다. 그들은 당신의 앱을 배우고 싶어하지 않으며 UI에서 무언가를 스와이프하여 작동하는 것을 보기 위해 발견이나 실험의 여정을 떠나고 싶어하지 않습니다. 20년 이상 사용성 컨설턴트로 활동한 스티브 크루그(Steve Krug)는 자신의 저서 Don't Make Me Think 에서 "[사용성]은 가장 중요한 원칙이자 디자인이 효과가 있는지 여부를 결정할 때 궁극적인 결정적 요소입니다."라고 말했습니다.

점성술 앱 모바일 앱 디자인
이 앱을 어떻게 사용합니까? (Dribbble에서 Brandon Termini의 점성술 앱)

70년대 브라운의 전설적인 독일 디자이너이자 Apple의 모든 것에 영감을 준 디터 람스(Dieter Rams)는 다음과 같이 말했습니다.

우리가 매일 사용하는 제품은 사람과 웰빙에 영향을 미치기 때문에 제품의 미적 품질은 유용성에 필수적입니다. 그러나 잘 실행된 개체만이 아름다울 수 있습니다.

즉, 디자인은 모든 수준에서 작동해야 합니다.

미니멀리즘 모바일 앱 디자인
디터 람스가 디자인한 브라운 라디오. 진정한 기능적 미니멀리즘.

디터 람스(Dieter Rams)가 말한 좋은 디자인의 10가지 계명은 다음과 같습니다.

모바일 앱 디자인 미니멀리즘

시각적 디자인(미학)은 UX 디자인의 한 측면일 뿐입니다. 비즈니스 목표 정의, 핵심 사용자(페르소나) 식별, 사용자 연구, 스케치, 아이디어, 와이어프레이밍, 목업, 프로토타입 및 사용성 테스트와 같이 UX 디자인 프로세스에서 이전에 발생한 모든 것을 향상시켜야 하는 최종 레이어입니다. . 감정을 위한 디자인과 함께 전반적인 사용자 경험을 향상시키는 최종 베니어판입니다.

정신적 노력 감소

모바일 앱 디자인 모범 사례
대부분의 사람들은 레이블이 지정되지 않은 아이콘이 무엇을 의미하는지 전혀 모르고 헤더의 대비가 부족하면 대부분의 사용자가 탐색을 볼 수 없게 됩니다. (전자상거래 앱 팬시)

잘못된 디자인이 실행되고 있는 상황에서 Designer와 Ms. Designer는 사람들에게 모호한 아이콘과 상징을 해독하고 해석하도록 요청하여 인지 부하(작업 기억에 사용되는 정신적 노력의 총량)를 증가시킵니다. 반면에 좋은 사용자 경험 디자인은 인지 부하를 줄여줍니다. 이러한 유형의 이기적인 디자인(예, 제가 거기에 갔습니다)은 사람들의 길에 장애물을 던지고 마찰과 좌절을 증가시킵니다. 그게 정말 목표인가요?

모바일 앱 디자인 멘탈 모델 UI 디자인
"ON 및 OFF"은(는) 무슨 뜻인가요? 아이콘은 무엇을 합니까? 이 디자인은 사용자에게 너무 많은 것을 해석하고 배우도록 요구합니다. (스탠 야쿠세비치 on Behance)

디자이너는 사용자가 앱에 대한 멘탈 맵을 형성하고 사물의 위치와 사용 방법을 직관적으로 이해할 수 있도록 명확한 레이블(링크 및 버튼)과 명확한 푯말(명확한 탐색)을 제공해야 합니다. 탐색은 명확하고 작업 지향적이어야 하며 논리적이어야 하며(예: 사용 방법을 제안하는 화면 컨트롤) 위치가 전체적으로 일관되어야 합니다(예: 메뉴 모음).

사용자가 스와이프할 수 있는 경우 탭해야 하는 위치를 명확하게 하고 쉽게 탭할 수 있을 만큼 충분히 큰 대상을 만들 수 있습니다. 오류를 방지합니다. 사람들이 무엇을 의미하는지 추측하게 하지 마십시오. 게으르지 마십시오. 햄버거와 케밥 메뉴(점 3개)는 탐색을 숨기고 콘텐츠를 덜 검색할 수 있게 하므로 피하세요. 특히 햄버거 메뉴판 같지도 않은 햄버거는 피하세요! 예, 공간이 제한되어 있지만 탭(상단 하단)과 햄버거 메뉴의 조합이 단일 햄버거보다 훨씬 더 나은 성능을 발휘한다는 것이 입증되었습니다.

모바일 앱 디자인 햄버거 메뉴
상단에 햄버거와 같은 메뉴. 해석이 필요한 레이블이 없는 아이콘. (Dribbble의 xiaoniaojiu에서 제공하는 회계 앱)


최고의 모바일 앱 디자인
Uber조차도 잘 설계된 앱에서 큰 UX 위반자입니다. 저 햄버거 메뉴 보이시죠? 대부분의 사람들도 그렇지 않을 것입니다.


잘못된 모바일 앱 디자인
Turo는 탭 표시줄에 레이블이 지정되지 않은 아이콘이 있는 또 다른 큰 위반자입니다. 그들의 의미에 대한 단서는 전혀 없습니다.


모바일 앱 디자인 실수
현실 세계의 대부분의 사람들은 이 앱을 사용하는 방법을 알아내는 데 어려움을 겪을 것입니다. (Tubik의 홈 버짓 앱)

완벽한 세상은 아니다

당신의 제품이 사용자의 손에 들어온다면 그들이 물건을 찾고 실제로 사용할 수 있을까요? 그들은 당신이 이러한 화면을 디자인하는 데 사용한 것과 같은 슈퍼 설정에 액세스하지 못할 수 있습니다. 사용성과 접근성(시각 장애, 신체 장애, 인지 장애)에 대해 다시 생각하십시오. 인구 조사 데이터에 따르면 미국에서는 최소 19%의 사람들이 장애가 있으며 그 비율은 저개발국에서 더 높을 가능성이 있습니다. 시력이 좋지 않은 사람이 앱을 선택하면 사용할 수 있습니까?

당신의 디자인은 "손가락 친화적"입니까 아니면 말 그대로 사용하기가 어렵습니까? 사람들은 앱 화면의 다른 부분에 도달하기 위해 얼마나 긴장해야 합니까? 사용자가 화면의 네 모서리를 뛰어다니게 하는 대신 실행 가능한 항목을 손끝 아래에 두는 사용자 작업 흐름을 고려하고 있습니까? 디자인이 정말 터치에 적합합니까? 모바일을 잡고 있는 손 아래 가려진 부분을 설명했습니까?

Luke Wroblewski가 Designing for Large Screen Smartphones에서 지적했듯이 더 큰 화면에서 디자인이 어떻게 작동할지 생각해 보셨습니까?

더 나은 UX를 위한 더 나은 모바일 앱 디자인
더 큰 모바일 화면은 특정 UI 요소에 접근하기 어렵게 만듭니다.

당신의 디자인은 44픽셀 너비 44픽셀 높이의 최소 타겟 크기에 대한 Apple의 iPhone Human Interface Guidelines 권장 사항을 실제로 따르고 있습니까? Microsoft의 Windows Phone UI 디자인 및 상호 작용 가이드에서는 터치 대상 크기가 34px이고 최소 터치 대상 크기가 26px인 것을 제안합니다.

당신의 디자인을 "힙하고, 깨끗하고, 미니멀하게" 만들 수 있기 때문에 텍스트와 배경 사이의 극도의 최소 대비 또는 읽을 수 없는 작은 텍스트와 사랑에 빠지지 마십시오.

모바일 앱 UX 디자인
요소 간의 대비가 부족하여 거의 해독할 수 없습니다. 세 위치에 있는 아이콘 중 일부는 레이블이 지정되지 않았습니다.


모바일 앱 디자인 나쁜 디자인
낮은 대비로 인해 탐색 내용을 읽는 것이 거의 불가능합니다. (Dribbble에서 Rono의 속도 추적기 앱)


더 나은 UX

Spotify 모바일 앱 디자인
Spotify의 앱 디자인은 깔끔하고 레이블이 잘 지정되어 있습니다. 주요 기능을 빠르게 이해합니다. (하지만 그 성가신 케밥 메뉴가 있습니다!)


스타벅스 모바일 앱 UX 디자인
스타벅스의 디자이너는 게으르지 않습니다. 봐봐, 햄버거 메뉴가 없어! 디자이너는 아이콘을 없애고 대신 간단한 텍스트 레이블을 선택했습니다.


좋은 모바일 앱 디자인
디자이너가 아이콘으로 창의력을 발휘하더라도 레이블이 명확하게 지정되면 추측이 없습니다. (Toptal 디자이너 Mohammed Bilal의 앱 디자인)

우리는 더 나은 디자인이 필요합니다

그렇다면 좋은 디자인이란 무엇일까요? 그 논의는 한 권의 책을 채울 수 있지만 일반적으로 말해서 "좋은 디자인"은 그 디자인의 사용자를 위해 모든 것이 모일 때입니다.

즉, 디자인이 "좋고" 사용자에게 유용하려면 성공을 위해 전달해야 하는 여러 수준과 요소를 고려해야 합니다.

디자인 트렌드는 왔다가 사라집니다. 평균적인 디자인 트렌드는 1~2년 동안만 유지됩니다. UX 디자인의 기본, 좋은 사용성은 여기에 있습니다.

훌륭한 UX의 7가지 요소에 따라 설계된 제품은 어떤 디자인 트렌드보다 오래 지속됩니다. 뛰어난 사용성, UX 모범 사례, 상호 작용 디자인 규칙 및 사용자 경험에 영향을 미치는 요소에 주의를 기울이는 디자이너는 그렇지 않은 디자이너보다 더 큰 영향을 미칠 것입니다. 하루가 끝나면 그들은 보상을 받게 될 것이고 그들의 디지털 제품은 시장에서 더 널리 받아들여지고 성공할 것입니다.

모바일 앱 인터랙션 디자인
사용자 경험에 영향을 미치는 7가지 요소. (인터랙션 디자인 재단에서)

디자이너로서 UX를 더 잘하고 싶다면(예쁜 앱뿐만 아니라 유용한 모바일 및 데스크톱 앱을 만들기 위해) 최소한 UX의 기초를 배우는 데 시간을 투자하세요. 먼저 UX 블로그를 팔로우하고 Toptal Design Blog, UX Magazine, UX Matters, UserTesting, uxdesign.cc, UX Design Weekly 또는 Interaction Design Foundation과 같은 뉴스레터 및 온라인 간행물을 구독하십시오.

살아 숨쉬는 참가자(실제 사람)를 대상으로 실시한 사용자 연구를 읽어보십시오. 그들이 말했듯이 숫자는 거짓말을 하지 않습니다. 다른 모든 것은 가설과 가정입니다.

Twitter에서 UX 사고 리더를 팔로우하세요. Nielsen Norman Group 및 Adaptive Path가 있는 creme de la creme과 같은 UX 기사와 백서를 읽으십시오.

Medium은 내가 온라인에서 UX/UI 디자인 기사를 읽을 때 가장 좋아하는 곳 중 하나입니다. 전 세계의 디자이너들은 디자인, 사용자 경험, 유용성 및 훌륭한 디지털 제품을 만들고 구축하는 것과 관련된 기타 주제에 대해 읽는 데 이 문서를 사용하고 있습니다. 다음은 Medium에서 팔로우할 디자이너입니다.

내가 아는 모든 UXer가 책장에 있는 기본적이고 고전적인 책을 읽고 성경처럼 다루십시오.

  1. 디자인에 관한 Don Norman의 독창적인 저서 Design of Everyday Things
  2. Don Norman의 감성 디자인: 우리가 일상적인 것을 사랑하는(또는 싫어하는) 이유
  3. 스티브 크루그의 Don't Make Me Think
  4. Jeff Gothelf의 린 UX: 린 원칙을 적용하여 사용자 경험 향상
  5. Jakob Nielsen의 사용성 엔지니어링
  6. 모든 디자이너가 사람에 대해 알아야 하는 Susan Weinschenk의 100가지

사용성 지침, 상호 작용 디자인 원칙, UX 모범 사례(연구, 백서, 기사 등)에 대한 유익한 온라인 리소스를 읽으십시오.

  1. 인터랙션 디자인의 첫 번째 원칙
  2. NNGroup의 전체 2,397개 사용성 지침(여러 보고서에 걸쳐)
  3. NNGroup의 사용자 인터페이스 디자인을 위한 10가지 사용성 휴리스틱
  4. Baymard Institute 기사: Baymard는 전자상거래 웹사이트에서 행동을 연구합니다.
  5. UX 마스터리 기사: UX의 모든 것

마지막으로 다음 5가지 UX 팟캐스트를 iTunes 보관함에 추가합니다.

  1. UX Pod: UX 디자이너와 일반적인 사용성에 대한 토론
  2. 인사이드 인터콤: 유수의 기업 최고 디자이너 인터뷰
  3. 비즈니스, 기술, 사용자의 균형에 열정적인 사람들을 위한 UX 팟캐스트
  4. UIE 팟캐스트: 디자인 세계에 대한 사용자 인터페이스 엔지니어링의 통찰력
  5. True North: 디자인 테스트 및 연구를 강조하는 디자인 스토리 발견

• • •

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

  • UI 디자인 모범 사례 및 일반적인 실수
  • 빈 상태 – UX에서 가장 간과되는 측면
  • 단순함이 핵심 - 최소한의 웹 디자인 탐색
  • 모바일 인터페이스에 대한 경험적 원리
  • 가독성을 위한 디자인 – 웹 타이포그래피 가이드