알아야 할 21 가지 UI 디자인 비밀

UI 디자인 비밀 : 미로를 바라 보는 남자
(이미지 출처 : 게티)

세션 시간과 이탈률 외에도 사용자 인터페이스 디자인의 핵심 목적은 사용자가 가능한 한 쉽고 즐겁게 일을하는 것입니다. 대부분의 디자인 영역과 마찬가지로 올바른 도구를 사용하면 도움이 될 수 있습니다. 웹 디자인 도구 그리고 최고 웹 사이트 빌더 ).

또한 권리가 웹 호스팅 서비스는 성공과 실패의 차이를 만들 수 있으므로 현명하게 선택해야합니다. 하지만 지금은 현장에서 10 년의 경험을 바탕으로 한 21 가지 UI 디자인 팁과 트릭이 있습니다.



01. 당신이 누구를 위해 디자인하는지 아십시오

사용자 연구, 와이어 프레임, 테스트 및 정보 아키텍처 디자인과 같은 작업은 종종 UX 디자이너의 책임으로 여겨지지만 UX / UI 디자이너 역할이 점점 더 혼합되는 것을보기 시작했습니다.



Invision에 따르면 ,“UX 디자이너 채용 공고의 66 %가 UI 기술을 요구합니다.”, UX 디자이너가 시각적 디자인, 브랜딩 및 타이포그래피를 이해하는 것이 중요해 졌다면 UI 디자이너가 참여하거나 최소한 기본 이해를 가지고 있어야합니다. 앞서 언급 한 UX 기술.

UX 워크 스트림에서 개발 된 페르소나, 와이어 프레임 및 정보 아키텍처의 생성에 관여하거나 최소한주의를 기울이는 UI 디자이너는 제품을 사용하는 사람들의 영향을받는 상호 작용, 색상 및 유형 선택을 할 것입니다. 자신의 스타일 선호보다는 서비스. UI 디자이너는 자신이 디자인하는 사용자를 이해하는 데 시간을 할애함으로써 시각적으로나 기능적으로 사용자의 요구에 더 적합한 인터페이스를 만들 것입니다.



CSS 생성

(이미지 출처 : Getty / Future)

고객의 업무, 경력 또는 대행사를 다음 단계로 끌어 올릴 수있는 최신 창의적이고 실용적인 기술을 배우고 싶다면, CSS 생성 , 웹 디자이너 및 개발자를위한 컨퍼런스입니다. 특별 제공 코드 사용 웹 디자이너 2 티켓 10 % 할인.

02. 선택 마비 극복

UI 디자인 비밀 :



Nike 메가 메뉴에서 최상위 옵션을 줄이면 사용자의 선택 마비를 제한하는 데 도움이됩니다.(이미지 출처 : Nike)

Mark Zuckerberg는 꽤 단순한 옷장을 가지고 있습니다. 모두 회색 티셔츠예요. 그 자신의 말로 :“나는 가능한 한 적은 결정을 내릴 수 있도록 내 인생을 정리하고 싶다”고 말했다. 이 원칙은 사용자에게 너무 많은 옵션을 제공하면 사용자를 압도하고 과도하게 분석하며 궁극적으로 작업이나 프로세스를 완료 할 가능성이 낮아 지므로 인터페이스 디자인에 매핑됩니다. 가능한 경우 사용 가능한 옵션을 제한하거나 여정의 해당 단계에서 관련성이 낮은 옵션을 숨겨야합니다.

02. 기본 상태로 안내

UI 디자인 비밀 :

Skyscanner는 기본 상태를 선택하여 사용자가 옵션을 사용자 지정할 수 있습니다.(이미지 출처 : Skyscanner)

기본 상태는 사용자에게 '선택해주세요'를 요청하는 것 이상을 수행 할 수 있습니다. 같은 웹 사이트 스카이 스캐너 사용자에게 가장 가까운 출발 공항을 찾고, 다가오는 휴일과 관련된 날짜를 제안하고, 비행하는 승객 수를 미리 선택합니다. 일반적으로 선택되는 항목을 기반으로 기본 상태를 디자인하면 사용자가 필요로하는 노력이 줄어들어 미리 선택된 옵션을 사용자 지정할 수 있습니다.

03. 빈 상태로 신속한 조치

UI 디자인 비밀 :

Tidal의 빈 상태는 이전에 들어 보지 못했던 음악을 발견하게합니다.(이미지 출처 : Tidal)

채워지지 않은 바구니, 무인 재생 목록 및 기본 검색 인터페이스는 종종 사용자에게 공허함을 남길 수 있습니다. 주의하십시오 조수 , '앨범이없는'사용자를 최고의 추천으로 안내합니다. 인터페이스 내에서 막 다른 골목을 만드는 대신 사용자에게 도움이 될 새로운 기능을 발견 할 기회로 빈 상태를 사용해야합니다.

04. 오류 상태로 아첨하게 실패

UI 디자인 비밀 :

Kitchen Stories 오류 상태는 사용자가 원하는 것을 찾지 못한 것에 대해 사과합니다.(이미지 출처 : Kitchen Stories)

디지털 영역에서는 때때로 일이 잘못되고이를 위해 설계하지 않으면 사용자가 불만을 느낄 수 있습니다. UI 디자이너는 이해할 수없는 메시지를 던지기보다는 긍정적 인 행동과 정서를 장려하는 오류 상태를 만듭니다. 그만큼 Kitchen Stories 앱 주방 레시피에 대해 빈 결과를 반환하면 사과하고 사용자가 새로운 요청을 제출할 수있는 클릭 유도 문안을 제공하면서이를 훌륭하게 처리합니다. 우리의 마음에 드는 것보기 404 페이지 더 많은 예를 보려면.

05. 세분화 선택

UI 디자인 비밀

Apple은 iPhone을 선택하는 과정을 명확하고 간결한 단계로 나눕니다.(이미지 출처 : Apple)

선택 사항을 제한하고 그룹화하는 것 외에도 프로세스로 분할하여 덜 복잡하게 만들 수 있습니다. Apple의 iPhone XR 백엔드 인벤토리는 다양한 색상, 크기 및 네트워크를 가진 수백 가지 제품의 큰 매트릭스 목록이라고 상상할 수 있습니다. 그러나 사용자가 새로운 애플 아이폰 XR 웹 사이트를 통해 간단한 단계별 인터페이스를 통해 한 번에 한 가지 선택 사항을 좁힐 수 있습니다. 많은 구성 옵션을 제공하는 경우 인터페이스가 사용자보다 무거운 작업을 수행해야합니다.

06. 저항 감소

UI 디자인 비밀 :

Slack의 인터페이스는 사용자가 아닌 어려운 작업을 수행합니다.(이미지 출처 : Slack)

우리가 디자인하는 인터페이스는 사용자가 가능한 한 쉽게 작업을 완료 할 수 있도록해야합니다. 모바일 앱에 로그인 할 때 느슨하게 복잡한 비밀번호를 기억하고 입력하는 번거로운 작업을 아름답게 건너 뛰기 위해 사용자의 이메일 주소로 전송되는 '마법'확인 링크를 사용합니다.

사용자가 아닌 인터페이스에 부담을 주면 웹 사이트 또는 응용 프로그램 내의 모든 프로세스가 끝나는 데 훨씬 덜 저항하게됩니다. 인터페이스 내 상호 작용 속도를 높일 수있는 기술이 있다면이를 염두에두고 설계해야합니다.

07. 필요한 것만 가져 가세요

UI 디자인 비밀 :

사용자가 최소한의 정보로 가입 할 수 있도록 허용하고 보드에 한 번 추가하도록합니다.(이미지 출처 : LinkedIn)

저항이 가장 적은 경로를 만들려면 인터페이스 내에서 주어진 단계에서 가능한 한 적은 정보를 사용자에게 요청해야합니다. 사용자가 입력해야하는 데이터가 적을수록 운동을 완료 할 가능성이 높아집니다.

LinkedIn과 같은 사이트는 플랫폼에 가입 할 때 최소한의 데이터 (이름, 성, 이메일 및 비밀번호)를 요구 한 다음, 한 번에 하나의 개인 정보를 입력하도록하여 프로필 생성 프로세스를 게임 화합니다. 온 보딩. 문을 통과하기 위해 전체 경력을 입력해야한다면 누구도 LinkedIn에 가입 할 수 없습니다.

08. 진행 감 부여

UI 디자인 비밀 :

Pinterest는 간단한 시각적 표시기로 가입 최종 목표에 대한 진행 상황을 보여줍니다.(이미지 출처 : Pinterest)

긴 양식과 프로세스가 필요한 경우가 있습니다. 예를 들어, 많은 금융 애플리케이션은 완료하는 데 광범위한 데이터 입력과 시간이 필요합니다. 에 가입 할 때 핀터 레스트 사용자가 여정에서 어떤 단계 (4 개 중)에 있는지를 보여주는 표시기가 인터페이스 내에있어 최종 목표를 향해 진행되고 있음을 보장합니다. 이러한 추진력은 사용자가 프로세스가 언제 끝날지 알지 못하는 것에 대한 불만을 덜어 주므로 프로세스를 완전히 포기할 가능성이 줄어 듭니다.

09. 컨벤션에주의하라

UI 디자이너로서 우리는 자연스럽게 창의력을 한계까지 밀어 붙이고 사용자가 디지털 제품과 상호 작용하고 경험할 수있는 새롭고 흥미로운 방법을 고안하고자합니다. 즉, 사용자가 인터페이스 사용법을 배우는 데 너무 많은 시간을 할애 할 필요가 없도록 독창성과 친숙 함 사이의 균형을 유지해야합니다. Snapchat과 같은 앱 – 최근 새 로고 – 급진적 인 탐색 옵션으로 많은 노인 사용자를 소외시켜 뉴욕 타임즈가 썼습니다. Snapchat을 사용하지 않는 사람들을위한 Snapchat 가이드 .

'모든 방향으로 스 와이프 할 수 있고 손가락을 모아서 다른 화면에 액세스 할 수도 있습니다.'( Medium에서 더보기 ), 애플리케이션을 효과적으로 사용하기 전에 상호 작용을 배우기 위해 투자해야하는 시간이 있습니다.

젊은 사용자는 Snapchat의 검색 가능성을 받아 들였지만 탐색 수단으로 탭하고 클릭하는 규칙을 이해하는 성인은 앱을 더 적게 채택했습니다. 웹이 성장함에 따라 요소 위치 지정에 대한 여러 규칙 (오른쪽 상단의 바구니 및 왼쪽 상단의 햄버거 메뉴)이 등장했으며이를 고려해야합니다. 우리의 인터페이스는 사용자를 흥분시키고 즐겁게해야하지만 전환을 유지하고 이탈률을 제한하려는 경우 사용할 수있을만큼 충분히 예측 가능해야합니다.

10. 시각적 피드백 제공

UI 디자인 비밀 :

Google Snackbar의시기 적절한 피드백(이미지 출처 : 스낵바)

피드백은 선물이며 인터페이스 디자인 내에서 그렇게 취급되어야합니다. Google의 스낵바 머티리얼 디자인 시스템에 존재하는 스마트 한 마이크로 인터랙션입니다. 스낵바는 앱 또는 웹 사이트 인터페이스의 화면에 일시적으로 표시되어 사진 저장, 이메일 전송 또는 '재시도'메시지와 같이 사용자가 취한 조치의 결과를 사용자에게 계속 알려주는 간략한 상황 별 지침, 오류 또는 승인을 제공합니다. '앱에 오류가있을 때.

UI 디자이너로서 우리는 인터페이스 내의 각 주요 상호 작용에 대한 시각적 피드백을 제공해야합니다. 사용자의 장바구니에 항목이 추가 된 경우이를 알립니다. 결제가 성공적으로 완료되면 감사 메시지로 알리고 배송 또는 반품에 대한 질문이있는 경우 어디로 가야하는지 안내합니다. 시각적 단서와 애니메이션은 사용자가 웹 사이트 또는 애플리케이션 내에서 크고 작은 작업의 완료를 인식하는 데 도움이되며, 성취감을 부여하고 조치가 취해 졌음을 인식함으로써 불안을 줄이는 데 도움이됩니다.

11. 사용자 제작 콘텐츠 활용

사람들은 브랜드의 기발한 카피 라이팅뿐만 아니라 다른 사람들의 말에 따라 구매합니다. 많은 전자 상거래 사이트가 고객 리뷰에서 큰 비중을 차지하는 이유입니다. 선글라스 브랜드 Meller 전환율 13 % 증가 보다 전통적인 전자 상거래 사진 갤러리와 함께 제품 페이지에 제품을 즐기는 이미지를 표시합니다.

디자인하려는 브랜드 또는 회사에 사용할 수있는 사용자 생성 콘텐츠 (UGC)가있는 경우이를 웹 사이트 또는 애플리케이션 UI의 페이지에 짜 넣으면 특히 청중이 밀레 니얼 세대 인 경우 전환을 늘리는 데 도움이 될 수 있습니다.

12. 사용자를 옹호자로 취급

UI 디자인 비밀 :

GoPro의 홈페이지 주인공은 사용자가 촬영 한 동영상을 사용하여 제품의 힘을 보여줍니다.(이미지 출처 : GoPro)

제품과 서비스로 사용자를 기쁘게하는 것도 한 가지이지만, 그들은 우리의 옹호자이거나 심지어 우리 마케팅 팀의 일원이 될 수도 있습니다. GoPro의 주요 영웅 동영상 홈페이지 HERO7 카메라를 사용한 고객이 전적으로 촬영 한 영상을 제공합니다 (최고의 GoPro 거래 자신의 GoPro를 얻으려면).

제품 사용자가 촬영 한 필름을 사용하면 관련 맥락에서 잠재 구매자에게 카메라의 기능을 보여주고 GoPro 커뮤니티에 약간의 노출로 동영상을 제출 한 25,000 명에게 보상을 제공합니다. 충성도가 높은 청중이 있다면 그들의 목소리와 콘텐츠를 활용할 수있는 방법이 무수히 많으므로 다음 인터페이스를 디자인 할 때이 점을 고려해야합니다.

13. 이미지를 사용하여 사용자 안내

UI 디자인 비밀 :

이메일 등록을 유도하는 비전과 멀리서 바라 보는 모델(이미지 출처 : Sunglasses Hut)

아름다운 이미지는 인터페이스를 시각적으로 향상시킬 수있는 힘이 있지만 페이지 또는 화면 내의 특정 위치에주의를 집중시키는 데 사용할 수도 있습니다 (다음을 사용하여 멋진 이미지를 백업하는 것을 잊지 마십시오). 클라우드 스토리지 ). 이미지에 사람이 포함 된 경우 사용자는 무의식적으로 그 사람의 비전을 따라 가며 UI 디자이너에게 클릭 유도 문안이나 유용한 정보를 미묘하게 안내 할 수있는 기회를 제공합니다.

The Sunglasses Hut 웹 사이트 이 개념을 웹 사이트 바닥 글에 활용하고 두 사람이 사용자에게 이메일 등록을 지시하는 시선을 사용합니다. 이미지를 수평으로 뒤집 으면 멀리서 바라 보는 모델 일뿐입니다.

14. 영리한 방법으로 여백 사용

UI 디자인 비밀 :

Dropbox Business 사이트에는 숨을 쉴 수있는 충분한 공간이 있습니다.(이미지 출처 : Dropbox Business)

UI 디자이너가 각각의 모든 인터페이스에 가능한 한 많은 정보를 넣기를 원하는 것은 흔한 실수이지만, 이는 시각적 과부하로 이어질 수 있으며 궁극적으로 페이지 나 화면의 너무 많은 다른 영역에주의를 끌고있는 사용자를 압도 할 것입니다. .

Dropbox Business 시작 페이지 부정적인 공간을 사용하여 큰 효과를 내고 각 요소마다 숨을 쉴 수있는 충분한 공간을 제공하는 동시에 제품의 이점에 대한 간략한 개요를 제공합니다. 주요 정보와 CTA 주변 공간을 전략적으로 최대화하면 사용자의 관심을 끌기 위해 다른 요소가 없이도 사용자를 끌어들일 수 있습니다.

15. 모바일로 시작

2018 년에 전 세계 웹 사이트 트래픽의 52.2 % 휴대 전화를 통해 생성되었으므로 모바일 웹 사용자에게 최적화 된 디지털 인터페이스를 만드는 것이 그 어느 때보 다 중요합니다. 데스크톱보기는 종종 UI 디자이너가 선택한 캔버스였습니다. 비디오 기반 배너 및 롤오버 및 호버와 같은 상호 작용으로 시작한 다음이를 제거하거나 모바일로 축소 할 때 해결 방법을 고안해야합니다.

대안으로 모바일 뷰를 디자인하면 먼저 불필요한 노이즈를 모두 제거하고 사용자가 인터페이스 내에서 작업을 수행하는 데 중요한 요소에 집중해야합니다. 확장을 통해 데스크톱보기에 개선 사항을 추가하여 핵심 구성 요소가 준비되면 해당 경험에 더 적합한 기능을 추가 할 수 있습니다.

스타 워즈 힘이 단면을 깨운다

16. 올바른 유형의 라이센스 받기

아름다운 인터페이스를 다듬고 개발 팀을위한 자산을 준비한 다음 글꼴 선택에 엄청난 라이선스 비용이 부과되거나 더 나쁜 것은 웹에 최적화되어 있지 않다는 것을 깨닫는 것보다 더 나쁜 것은 없습니다. 글꼴 라이선스에는 여러 유형이 있으며, 일부는 사용자 당, 일부는 사용 시간당, 다른 일부는 일회성 요금을 부과합니다. 브랜딩 대행사 블루 에그 이것에 대한 큰 분석을 제공합니다.

글꼴을 선택할 때 웹에서 렌더링 할 글꼴의 기능뿐 아니라 결과적으로 발생할 재정적 영향을 고려하는 것이 중요합니다. 예산이 부족하면 다음과 같은 오픈 소스 솔루션 Google 글꼴 무료로 사용할 수있는 수백 가지 글꼴을 제공합니다. 또한 참조 최고의 무료 글꼴 디자이너를 위해.

17. 인터페이스 작성

인터페이스를 맨 뼈대로 제거하고 색상, 글꼴, 이미지 및 애니메이션을 제거하면 궁극적으로 한 가지만 남게됩니다. 부. lorem ipsum 및 자리 표시 자 텍스트를 삭제하여 인터페이스 디자인의 시각적 측면으로 바로 이동하고 싶지만, 먼저 인터페이스를 작성하는 데 시간을 투자하면 전반적인 톤을 더 잘 개발하고 메시지와 이야기를 반영 할 수 있습니다. 청중과 구두로 소통합니다.

우리는 개별적으로 사본을 읽을 때 페이지의 흐름을 정말로 이해할 수 있으며, 우리가 말하려는 내용의 핵심을 진정으로 지원하고 적용하는 시각적 자산과 함께 우리의 말과 함께 할 수있는 기회를 제공합니다.

18. 적절한 온보드

UI 디자인 비밀 :

DuoLingo의 앱에는 깔끔한 온 보딩 프로세스가 있습니다.(이미지 출처 : DuoLingo)

온 보딩은 '신규 사용자가 제품을 채택 할 때 성공할 가능성을 높이는 프로세스'입니다. UserOnboard , UI 디자이너로서 우리는 디지털 제품과 서비스를 사용자에게 가장 잘 소개 할 수있는 방법을 결정하는 데 핵심적인 역할을합니다.

언어 학습 앱 듀오 링고 는 사용자를 작업 기반 인터페이스로 바로 연결하는 온 보딩 흐름을 활용하여 제품의 기능을 익히고 제품 작동 방식을 샘플로 표시 한 후 등록을 요청합니다. 사용자는 계정을 만들기 전에 제품을 테스트 할 수 있습니다.

인터페이스에 피할 수없고 복잡하거나 익숙하지 않은 상호 작용이 포함 된 경우 슬라이드 쇼, 설명 비디오 또는 자습서 오버레이를 통해 수행되는지 여부에 관계없이 사람들에게 사용 방법을 가르쳐야합니다. 사용자에게 온 보딩 또는 소개의 일부로 '작동 방식'의 샘플을 제공하면 사용자가 경험에 완전히 몰입 한 후 혼란을 줄이고 제품의 가치를 미리 보는 사람들의 채택을 장려합니다.

19. 개발자 참여

결국 우리의 디자인을 구축하게 될 사람들은 프로젝트의 가능한 초기 단계에서 개발자를 참여시키는 것이 좋습니다. 디자이너는 사용자가 보는 것을 만들지 만 개발자는 성능을 극대화하고 페이지로드 시간을 단축하며 내부에서 일어나는 일을 최적화하여 인터페이스 경험을 향상시킵니다.

디자인 프로세스 전반에 개발자를 지속적으로 참여 시키면 인터페이스가 시각적 측면을 넘어서 작동하는 방식에 대한 입력을받을 수 있으므로 기술과 같은 기술에 대해 더 많은 정보를 제공 할 수 있습니다. 슬랙 매직 링크 인터페이스를 최대한 쉽게 사용하도록 만들 수 있습니다.

20. 디자인 시스템을 사용합니다.

UI 디자인 비밀 :

IBM의 포괄적 인 탄소 설계 시스템(이미지 출처 : IBM)

여러 디자이너가 참여할 때 웹 사이트 또는 응용 프로그램 인터페이스에서 일관성을 보장하는 것은 임무가 될 수 있으며 종종 동일한 UI 구성 요소의 수많은 변형으로 끝날 수 있습니다. 즉, 프로젝트 전체에 걸쳐 작업이 복제됨을 의미합니다. 에 따르면 InVision , 설계 시스템은 '명확한 표준을 따르는 재사용 가능한 구성 요소의 모음으로, 함께 조립하여 여러 응용 프로그램을 구축 할 수 있습니다'입니다.

IBM의 탄소 디자인 시스템 예를 들어는 디자이너와 개발자가 UI 프로젝트 작업시 액세스 할 수있는 자산, 코드 스 니펫 및 문서의 포괄적 인 저장소를 제공하여 디자인 팀이 서로 더 빠르고 스마트하게 작업 할 수 있도록합니다. 어떤 방식의 디자인 시스템 또는 최소한 특정 프로젝트 내의 모든 UI 구성 요소가있는 패턴 라이브러리를 사용하여 인터페이스를 일관되게 만들고 자산을 재사용 할 수 있으며 유지 관리를 더 쉽게 만들어야합니다.

21. 디자인 파일 정리

좋아하든 싫어하든 일부 디자이너는 지저분하게 작업 할뿐입니다. 창의적인 과정에서 이것이 의미가 있지만 처음으로 디자인 파일을 선택하고 작업하는 데 상당한 시간을 투자해야한다는 사실을 알게되면 답답할 수 있습니다. 각 요소가 존재하는 레이어입니다.

Monzo 'Monzo에서 만든 첫 번째 .sketch 파일부터 디자인 파일을 매우 깔끔하게 정리했습니다. 그리고 우리가 한 명의 디자이너에서 13 명의 팀으로 성장함에 따라, 합리적인 디자인 환경을 유지하는 것은 정말 유익했습니다. ' 레이어, 아트 보드 및 폴더의 이름을 지정하여 디자인 파일을 정리하는 데 시간을 할애하면 모든 디자이너 (미래의 자신 포함)가 선택하고 작업하는 것이 훨씬 쉬워집니다. 개발자들도 감사 할 것입니다!

이 기사는 원래 288 호에 게시되었습니다. 웹 디자이너 . 288 호 구매 또는 여기에서 구독하세요 .

더 읽어보기 :