모든 웹 디자인 프로젝트에서 따라야 할 좋은 UI 디자인의 10가지 규칙

하드코딩되고 절대 변경되지 않는 HTML이 있는 Geocities 사이트의 시대는 지났습니다. 오늘날의 사이트와 앱은 역동적이고 상호작용적입니다. 디자이너로서 우리의 임무는 웹 UI 디자인과 상호 작용하는 인터페이스가 가능한 한 이상적이도록 만드는 것입니다. 운 좋게도 도움이 될 수 있는 거의 보편적인 규칙이 있습니다. 우리는 당신이 미래의 모든 웹 디자인 프로젝트를 향상시킬 수 있도록 최고의 디자인 원칙이라고 생각하는 것을 모았습니다.

모든 웹 디자인 프로젝트에서 따라야 할 좋은 UI 디자인의 10가지 규칙

YouTube 채널 구독

1. 사용자가 필요로 하는 모든 것을 쉽게 액세스할 수 있도록 합니다.

웹 디자인 앱용 디자인 도구 시리즈, 비디오 게임의 캐릭터 인벤토리, 스프레드시트 등 무엇이든 사용자가 원하는 것을 찾을 수 없으면 소프트웨어에서 튀어 나옵니다. 탭을 사용하면 액세스할 수 있습니다. 바로 가기 및 마우스 오버 툴팁도 있습니다.

예를 들어 우리는 탭을 사용하여 Divi를 구성하기로 결정했습니다. 필요한 모든 도구는 카테고리별로 구분된 빌더에 있습니다. 도구 모음도 비슷하게 액세스할 수 있습니다. WordPress를 사용하는 경우 관리 도구 모음을 통해 게시물 편집기, 테마 사용자 지정 프로그램, 플러그인 설정 등으로 빠르게 이동할 수 있습니다. 옵션에는 레이블이 명확하게 표시되어 있으므로 검색할 필요가 없습니다.

또 다른 예는 도움말/지원/연락처 옵션입니다. 모바일 앱, 웹 앱, WordPress 웹사이트 등 UI를 디자인할 때 사용자는 항상 도움말 버튼(또는 지원 문의 버튼)을 찾아야 합니다. 그들은 절대적으로 어떤 시점에서 당신에게 연락해야합니다 . 그렇기 때문에 항상 도움말 버튼을 전면 중앙에 배치해야 합니다. 디비 봐. 모든 모듈에는 필요할 때 언제든지 간편하게 사용할 수 있는 지원 버튼이 있습니다.

또한 작업 중인 기능에 대한 비디오 자습서가 포함된 도움말 창이 나타납니다. 이 모듈에 포함함으로써 Divi는 훨씬 더 쉽게 접근할 수 있고 덜 답답해집니다. 또한 UI의 일부로 도움말 위치가 전체 제품에서 일관됩니다. 이것은 우리를 다음 요점으로 인도합니다…

2. 일관성 유지

방금 전에 말했듯이 UI 내에서 일관되게 기능을 배치하는 것이 중요합니다. 그러나 UI가 작동하고 전체 제품에서 일관되게 보이는 것도 고려해야 합니다. 한 페이지의 상단과 다른 페이지 하단에 메뉴를 표시하지 마십시오. 로드할 때마다 메뉴 항목을 다시 정렬하지 마십시오. 사용자가 사이트의 위치를 ​​알 수 있도록 하십시오. 블로그 게시물 아래에 연락처 양식을 보관하고 있다면 그대로 두지 마십시오. 사용자는 알아차리고 당황할 것입니다.

일관성에는 글꼴도 포함되며 디자인은 페이지에서 페이지로 작동해야 합니다. 페이지에서 페이지로 머리글/본문 글꼴을 바꾸지 마십시오.

최소한의 놀라움의 원칙이라고 하는 흥미로운 아이디어가 있습니다. 즉, 사용자가 작동 방식에 놀라게 만들면… 더 직관적으로 수정할 수 있도록 수정해야 한다는 것입니다.

또한 UI가 플랫폼에 적합한지 확인해야 합니다. iOS 앱은 경우에 따라 Android와 다르게 작동합니다. 데스크탑 사이트는 메뉴, 갤러리 및 제품 체크아웃에 대해 모바일 사이트와 요구 사항이 다릅니다. 일관성이란 사용자가 사이트에서 수행할 작업을 파악하도록 하여 사용자를 좌절시키지 않는 것을 의미합니다.

3. 명확해지기

이것은 위의 반복처럼 보일 수 있지만 명확성과 일관성은 다릅니다. 명확성은 사용자가 항상 무엇을 해야 하는지 알고 싶어한다는 의미입니다. 어떤 면에서 이것은 사용자의 불만을 줄이고 유지율을 높이며 이탈률을 줄이기 때문에 UX 디자인에도 영향을 미칩니다.

명료성은 미니멀리스트(그리고 어느 정도는 잔인한) 웹 디자인이 그토록 인기를 얻은 이유입니다. 사람들은 혼란이 없거나 거의 없기 때문에 사이트 또는 페이지의 목적에 대해 혼동하지 않습니다. Ling's Cars가 제공하는 것과 반대되는 경험을 제공하고자 합니다.

명확성을 달성하는 한 가지 방법은 다른 페이지에서 한 단계에서 다른 단계로 이동하는 것입니다. 체크아웃 프로세스가 페이지 아래로 스크롤되도록 하거나 단일 섹션 또는 상자에 포함되는 대신 사용자가 제품 페이지에서 쇼핑 카트 페이지, 체크아웃 페이지, 지불 선택 페이지, 주문 페이지로 이동하도록 하십시오. 확인 페이지. (Amazon은 아래 이미지에서 볼 수 있듯이 이 작업을 수행합니다.)

그들은 프로세스에서 자신이 어디에 서 있는지 정확히 알고 모호성을 제거합니다. 이것은 화면 공간이 프리미엄이기 때문에 모바일 사용자에게 특히 중요합니다 .

4. 피드백 제공

사용자가 원하는 마지막 것은 무슨 일이 일어나고 있는지 이해하지 못하는 것입니다. 버튼을 누르면 버튼이 눌렸다는 표시를 제공합니다. 여러 가지 방법으로 할 수 있습니다. 버튼에 애니메이션을 적용하여 페이지에 가라앉는 것처럼 보이게 할 수 있습니다. 로딩 아이콘(MacOS Rainbow Wheel과 같은)은 말할 필요도 없이 "당신의 요청을 처리하고 있습니다"라는 피드백을 제공합니다.

사용자가 파일을 업로드할 수 있도록 허용하는 경우(예: Dropbox 또는 Google Drive를 사용하여) 남은 시간을 표시합니다. 그들의 행동이 성공했음을 알려주는 팝업이나 모달을 제공하면 좌절과 혼란을 줄일 수 있습니다.

실제로 사용자가 인터페이스 내에서 어떤 작업을 수행할 때마다 작은 인정만으로도 좋은 경험과 그렇지 못한 경험의 차이가 될 수 있습니다.

5. 회상이 아닌 인정을 사용하라

좋은 시험 응시 기술의 반대는 사용자가 사이트를 볼 때 사이트에 대한 모든 것을 인식하기를 원합니다. 그들은 그것에 대해 생각하고 정보를 기억할 필요가 없습니다. 무엇보다 모든 부분이 직관적이고 한 지점에서 다른 지점으로 이동할 수 있도록 인터페이스를 간소화하고 있습니다. 이것은 위에서 언급한 대로 인식 가능한 아이콘을 사용하여 수행할 수 있습니다. 사람들은 특정 사물에 대한 특정 아이콘을 인식합니다.

또한 가상 둘러보기를 사용하여 처음이 아닌 경우에도 프로세스를 통해 사용자를 안내할 수 있습니다. 첫 번째 모달이 나타나면 프로세스를 인식하고 해당 작업을 수행하는 방법을 정확히 회상하는 데 에너지를 소비할 필요가 없습니다.

또한 사용자에게 사이트에서 수행하는 작업을 알려주는 적절한 메시지를 통해 이를 수행할 수도 있습니다. 간단한 호버 툴팁을 사용하여 Divi에서 이 작업을 수행합니다. 누군가 아이콘이 무엇을 하는지 기억하지 못하더라도 해당 기능으로 안내합니다. 그런 다음 아이콘을 인식해야 합니다. 또는 그들이 다시 호버링하는 경우 최소한 툴팁. 또는 정보를 얻기 위해 호버링하는 과정까지.

6. 사람들이 먼저 상호 작용할 방법을 선택하십시오

사진 크레디트 John Picklap, MarieClaire.com 제공

최악이 뭔지 알아? 풀 도어를 밀고 있습니다. 특히 당신이 그 하나에 도달하기 위해 이전을 밀었을 때. 그 건물의 설계자가 사용자 인터페이스를 일관되지 않게 만들었으므로 필요한 작업을 수행하는 방법에 대한 단서가 없었습니다. 그렇지 않은 버튼처럼 보이지만 응답을 기다리는 것은 어떻습니까? 글쎄요, 그 디자이너들은 사용자가 제품과 상호 작용하는 방식을 고려하지 않았기 때문입니다. 따라서 UI를 디자인할 때 하나의 움직임(아마도 두 개)을 선택하고 고수하십시오.

모바일 장치에서는 스와이프하는 경향이 있습니다. 스냅챗을 보세요. 설정 및 프로필에 도달하는 것을 포함하여 거의 모든 단일 작업은 스와이프로 수행됩니다 . Snapchat에서 아래로 스와이프하여 자신을 보고, 왼쪽으로 스와이프하여 대화로, 오른쪽으로 스와이프하여 스토리로, 위로 스와이프하여 추억(또는 이번 주에 이름이 무엇이든)을 볼 수 있습니다. 그들은 사용자가 제품과 상호 작용하기를 원하는 방식을 선택하고 이를 수용하도록 UI를 디자인했습니다. 그 반대가 아닙니다.

UI를 디자인할 때 메뉴와 탭, 아이콘, 스와이프와 제스처 또는 완전히 다른 것을 사용할지 선택합니다. Alexa와 Siri는 음성 입력을 기본 UI 상호 작용으로 사용합니다. 그들이 정보를 제공하고 작업을 수행하는 방식은 특정 입력을 중심으로 설계되었습니다. 그리고 사용자는 처음에 해당 정보가 귀하를 위해 설정되었기 때문에 직관적으로 무엇을 해야 하는지 압니다. 디자이너들이 당신에게 무엇을 하라고 말했고 당신은 그것을 해냈습니다 . 귀하의 사용자는 귀하가 귀하를 위해 동일한 조치를 취하는 것에 감사할 것입니다.

7. 설계 표준 준수

고장나지 않으면 고치지 말라는 옛말 이 여기에도 적용된다. 표준이 작동하면 무언가를 활성화하려고 할 필요가 없습니다. 아이콘 사용에서 요소의 표준 배치로 이동합니다. 사용자가 기대하는 것과 반대되는 것을 원하지 않습니다. 사람들은 물음표 (?) 가 도움을 의미한다는 것을 알고 있습니다. 따라서 느낌표 (!)를 사용하지 마십시오. 사용자가 모바일 메뉴를 찾도록 하려면 그리드가 아닌 햄버거 아이콘(3개의 겹친 선)을 사용하세요.

검색창에 대해 생각해 보십시오. 대부분의 사이트에서 비슷한 위치에 있는 경향이 있습니다. 사이드바 상단이나 헤더 메뉴 끝입니다. 없는 경우 페이지 상단의 중앙입니다. 사이드바 하단, 페이지 바닥글 또는 블로그 게시물 텍스트 아래에 유일한 검색 필드를 포함하기로 결정했다면 사람들은 어디를 봐야 할지 모를 것입니다. 표준 돋보기 아이콘으로 식별하더라도.

기존의 틀에서 벗어나 새롭고 혁신적인 디자인을 추구하는 데는 아무런 문제가 없지만 그렇다고 해서 디자인이 사용하기 어렵다는 의미는 아닙니다.

8. 원소 계층 문제

아니요, 우리는 땅, 바람, 물 또는 불 중 하나가 다른 것의 우두머리라는 것을 의미하지 않습니다. 이는 페이지의 요소가 유틸리티와 사용자가 페이지를 보는 방식 모두에 대해 명확한 계층 구조를 가져야 함을 의미합니다. 기본적으로 가장 중요한 기능이 해당 페이지의 맨 위에 있는지 확인하려고 합니다. 또한 이러한 종류의 계층 구조는 사용자를 페이지 아래로 유기적으로 유도하여 서비스를 통해 사용자를 안내할 수 있습니다.

프로세스를 진행하면서 크기가 감소하는 큰 요소는 중요도와 순서를 나타냅니다. 색상과 대비도 마찬가지입니다. 어수선한 내용은 사용자의 진행을 지연시키고 페이지의 목적에서 눈을 멀어지게 할 수 있으므로 공백을 사용하는 것도 중요합니다. 깔끔한 선, 많은 공간, 잘 정의된 요소는 문서나 주석 없이 UI를 이동하는 방법을 사용자에게 시각적으로 나타낼 수 있습니다.

적절한 경험 법칙은 왼쪽에서 오른쪽으로, 위에서 아래로 흐름을 유지하려는 것입니다.

9. 단순하게 유지

이 문의 양식을 보십시오:

이제 이것을 보십시오:

둘 다 요청을 위한 문의 양식입니다. 이 중 하나는 작성하는 데 문제가 없는 반면 다른 하나는 약간 더 골치 아픈 문제입니다. 정부 양식이 아닌 하단 양식의 디자인은 사용자 가 아닌 관리자를 위해 만들어졌습니다. 그건 당신의 일이 아닙니다. 당신 의 임무 는 가능한 한 사용자 에게 마찰 이 없도록 만드는 것입 니다 . 그리고 그것을 하는 가장 좋은 방법 중 하나는 절대적으로 필요하지 않은 것은 무엇이든 잘라내는 것입니다.

10. 사용자를 자유롭고 통제할 수 있도록 유지

마지막으로 다루고 싶은 것, 그리고 UI로 하고 싶은 가장 마지막 것은 사용자로부터 제어권을 얻는 것입니다. 또는 디자인에 의해 제한되거나 제한되는 느낌이 들도록 합니다. 당신은 그들에게 권한을 부여하고 싶고, 당신의 UI는 그들이 원하는 행동을 수행할 수 있도록 해야 합니다. 이 규칙에는 컨텍스트와 권한의 두 부분이 있습니다.

첫째, 사용자가 취해야 하는 작업은 무엇이든 수행하려는 작업 근처에 있어야 합니다. 게시물을 수정해야 하는 경우 수정 버튼은 저장 , 게시/제출 , 미리보기 버튼 근처에 있어야 합니다. 사실 더 나은 옵션은 사용자가 특정 항목(또는 페이지)에 대해 수행할 수 있는 모든 작업에 대한 상황별 메뉴입니다. 위에서 이야기한 것처럼 UI에서 일관성이 있다면 사용자는 이러한 컨텍스트 메뉴 또는 도구 모음에 항상 주어진 요소에 대한 전체 작업 목록이 있다는 것을 이해할 것입니다.

또한 UI는 항상 사용자가 자신이 취한 모든 작업에서 빠져 나오거나 되돌릴 수 있는 것처럼 느끼게 해야 합니다. 당신이 UI를 디자인하는 동안 그들은 그것을 사용하게 될 것 입니다. 따라서 그들은 작업을 완료하는 데 필요한 작업을 수행하기 위해 허가(또는 어쩌면 자유)가 필요합니다. 이 작업은 전자상거래 결제의 모든 페이지에 취소 버튼을 추가하는 것처럼 간단할 수 있습니다(브라우저의 뒤로 버튼을 누르면 문제가 발생할 수 있기 때문입니다). 아마도 실행 취소 기능이므로 실험이 괜찮다고 느낄 수 있습니다. 또는 대규모 프로젝트(예: Google 드라이브, WordPress 또는 Git)의 개정 기록.

사용자가 자유롭고 제약이 없다고 느낄 때 분명히 좋은 UI 디자인 원칙을 따랐습니다.

UI가 준비되었습니까?

나쁜 말장난. 알아요, 죄송합니다. 그러나 이러한 UI 규칙을 사용하면 다음 웹 디자인 프로젝트를 완벽하게 준비할 수 있습니다. 이 중 일부는 다른 프로젝트보다 일부 프로젝트에 더 많이 적용될 수 있지만 좋은 UI는 좋은 UI이고 좋은 UI는 좋은 UX로 이어집니다. 그러나 그것은 완전히 다른 게시물의 주제입니다.

좋은 UI 디자인을 위해 항상 따르는 규칙이 있습니까?

emojoez / shutterstock.com의 기사 특집 이미지