웹디자인에서 반드시 해야 할 것과 하지 말아야 할 것
UX 디자인 배우기 #135
Today UX 아티클
오늘은 웹디자인에서 반드시 해야할 것과 하지 말아야 할 것에 대해 애기하고자 합니다.
Nich Babich의 원문을 번역한 글입니다
웹 디자인은 까다로운 주제입니다. 웹 사이트를 만들 때는 여러 가지 사항을 고려해야 합니다.
이 작업을 간단하게 하기 위해서 ‘모든 웹 디자이너가 반드시 해야 할 일과 고려하지 말아야 할 일 목록’을 준비했습니다. 다행히도 모두 간단한 원칙입니다.
한 번 시작해봅시다.
해야 할 일
1. 기기에 상관없이 동일한 경험 제공하기
방문자는 여러 가지 다양한 기기를 이용하여 사이트에 방문합니다. 데스크톱, 랩탑, 태블릿, 폰, 뮤직 플레이어 또는 스마트워치 등 다양한 기기를 통해 여러분의 사이트를 방문할 수 있습니다. UX 디자인의 가장 중요한 부분은 방문자가 어떤 방법으로 사이트를 보느냐와 상관없이 동일한 경험을 하게 해 주는 일입니다.
방문자가 모바일 폰으로 사이트를 본다면, 집에서 데스크탑으로 사이트를 볼 때처럼 아무 문제 없이 모든 것을 찾을 수 있어야 합니다.2. 사용하기 쉽고 명확한 내비게이션 디자인하기
내비게이션은 사용성의 기본입니다. 기억하세요. 사용자가 길을 찾을 수 없다면, 웹사이트가 아무리 멋있어도 소용이 없습니다. 그렇기 때문에 웹사이트에 사용되는 내비게이션은 다음과 같은 특징을 갖추고 있어야 합니다.
간결성 (모든 사이트는 최대한 간결한 구조를 가져야 합니다)
명확성 (내비게이션에 들어가는 옵션은 방문자가 무엇인지 명확히 알 수 있어야 합니다)
일관성 (홈 화면의 내비게이션 시스템이 모든 페이지에서 일관성을 가져야 합니다)
방문자가 내비게이션을 훑어보고 가야 할 곳을 찾기 쉬우면서도 클릭을 최소화할 수 있게 내비게이션을 디자인해야 합니다.
3. 방문한 링크의 색상은 바꾸기
이러한 내비게이션 프로세스에서 링크는 핵심 요소입니다. 방문한 링크의 색상이 바뀌지 않는다면, 유저는 의도치 않게 동일한 페이지를 반복적으로 다시 방문하게 될 것입니다.
현재 어디에 있고 과거에 어디를 방문했었는지 알게 되면 다음에 어디로 가야 할지 쉽게 알 수 있습니다.
방문자가 어떤 페이지를 방문했었는지 알려주게되면 의도치않게 같은 페이지를 계속 방문하는 일을 방지할 수있습니다.4. 페이지를 한눈에 훑어보기 쉽게 만들기
유저는 사이트를 방문했을 때 페이지에 있는 모든 것을 면밀히 읽어보기보다는 빠르게 스크린을 훑어보는 경우가 더 많습니다. 그렇기 때문에, 방문자는 콘텐츠를 찾거나 과업을 완료하려는 경우에, 어디로 가야 할지 파악할 때까지 페이지를 훑어볼 것입니다.
그러면 여러분은 디자이너로서 좋은 시각적 계층구조를 디자인하여 그들을 도울 수 있어야 합니다. 시각적 계층구조는 중요도에 따라 요소들을 보여주거나 정렬하는 것을 의미합니다.
예를 들면 어디에 첫 번째로 눈길을 주고 그다음으로 어디를 봐야 할지 알려주는 것이죠.
스크린 타이틀, 로그인 폼, 내비게이션 아이템, 혹은 그 외 중요한 내용 등을 따라 초점을 이동할 수 있게 하여 방문자가 길을 제대로 찾을 수 있게 해주어야 합니다.
Basecamp에서 사용한 Z-스캐닝 패턴5. 모든 링크를 다시 확인해보기
유저는 링크를 클릭했을 때 404 에러 페이지가 뜨면 당황하기 쉽습니다. 방문자는 무언가 내용을 찾을 때 모든 링크가 기대했던 곳으로 연결될 것이라고 생각하지 404페이지나 기대치 않았던 페이지로 연결될 것이라고 생각하지 않습니다.
6. 클릭 가능한 요소
오브젝트의 형태는 사용자에게 사용하는 방법을 알려주게 됩니다. 링크 혹은 버튼처럼 보이는 시각적 요소를 클릭했는데 클릭이 되지 않는다면(가령 밑줄이 쳐진 단어가 링크가 아니라거나 행동 유도 요소를 갖췄지만 하이퍼링크가 걸려있지 않다거나) 유저는 혼란스러워하기 쉽습니다.
페이지의 어떤 영역이 일반적인 글이고 어떤 부분이 클릭 가능(혹은 탭 가능)한 영역인지 유저가 쉽게 알 수 있어야 합니다.
클릭 가능한 요소는 유저가 명확히 알 수 있게 해줘야 합니다.
Menagerie Climb 웹사이트 사례. 좌측에 보이는 오렌지 박스는 버튼일까요? 답은 ‘아니다’입니다. 모양과 레이블 때문에 버튼처럼 보이지만 버튼이 아닙니다.
하지 말아야 할 일
1. 내용이 로딩될 때까지 방문자가 기다리게 만들지 않기
웹을 사용하는 사용자들은 인내심이 길지 않습니다. NNGroup의 연구에 따르면 “하나의 과업에 유저가 집중력을 유지할 수 있게 할 수 있는 한계는 10초”라고 합니다.
방문자가 사이트가 로딩되기를 기다려야 하는 상황에서 그들이 기대한 만큼 사이트가 빠르게 로딩되지 않는다면 실망하고 사이트를 떠나게 될 것입니다. 로딩 중임을 알리는 표시가 아무리 아름답게 디자인된다 하더라도 로딩하는 데 너무 오래 걸리면 유저는 사이트를 떠날 수 있습니다.
Image credit: Ramotion2. 링크가 새 탭에 열리게 만들지 않기
이런 무례한 행동은 유저가 이전에 보고 있던 사이트로 돌아갈 수 있는 일반적인 경로인 뒤로 가기 버튼을 사용할 수 없게 만듭니다.
3. 프로모션이 눈길을 사로잡지 않게 하기
프로모션과 광고는 옆에 있는 내용을 가릴 수 있으며 유저가 과업을 성취하기 어렵게 만듭니다. 광고처럼 보이는 모든 것은 일반적으로 유저가 무시하는 경향이 있습니다 (이러한 현상을 ‘banner blindness’라고 합니다).
유저는 일반적으로 광고처럼 보이는 모든 것을 무시합니다4. 스크롤 하이재킹 하지 않기
스크롤 하이재킹(scrollhijacking)은 디자이너나 개발자가 웹사이트에서 스크롤바가 다른 곳과 다르게 작동하도록 조작한 경우를 뜻합니다. 애니메이션 효과, 고정 스크롤 포인트 및 스크롤 바 자체의 여기에는 애니메이션 효과, 고정 스크롤 포인트, 심지어 스크롤 자체를 다시 디자인하는 것 등이 포함됩니다.
스크롤링을 하이재킹 하는 것은 유저가 스크롤링을 통제하지 못하게 하기 때문에 가장 짜증 나는 일 중 하나입니다. 유저 인터페이스나 웹사이트를 디자인할 때는 유저가 사이트 혹은 애플리케이션을 이용한 자신의 탐색 행동이나 움직임을 통제할 수 있게 해줘야 합니다.
맥 프로 페이지맥 프로 페이지는 혐오스러운 스크롤링 효과를 사용하고 있습니다. 싱글 페이지 패럴렉스 레이아웃을 사용하고 있으며 페이지에서 다음 섹션으로 넘어가는 것을 우측에 점으로 보여줍니다.
6. 소리까지 같이 자동 재생되는 영상 사용하지 않기
배경에서 자동으로 재생되는 영상, 음악, 사운드는 유저를 불쾌하게 합니다. 이러한 요소는 적합하고 예상 가능한 상황에서만 사용되어야 합니다.
페이스북 영상은 자동 재생되지만 유저가 영상을 보고 있다는 행동(예: 영상의 기능을 사용하는 등)을 하기 전까지는 사운드가 나오지 않습니다.
7. 아름다움을 위해 사용성을 희생하지 않기
사이트나 유저 인터페이스의 디자인은 절대 사용자가 스크린에 보이는 콘텐츠를 소비하는 데 방해가 되어서는 안 됩니다. 콘텐츠 뒤에 어지러운 배경화면을 사용하거나 적합하지 못한 컬러스킴을 사용하여 사이트의 가독성을 해치게 하면 안 됩니다.
폰트에 대조가 되지 않는 색상을 사용하는 것은 나쁜 아이디어입니다.7. 깜빡이는 텍스트나 광고 사용하기
깜빡이는 콘텐츠는 예민한 사용자에게 발작을 유발할 수 있습니다. 그런 사용자가 아니라 할지라도 이러한 효과는 일반적으로 짜증을 유발하거나 방해가 됩니다.
전민수 UX 컨설턴트 소개
(UX 실무 경력: 27년차 UX 전문가: LG전자, 서울시청 등 약 300회 이상 UX 컨설팅 수행)
(UX 강사 경력: 23년차: 삼성, SK, KT 등 약 1,000회 이상 UX 강의 진행)
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 최소 1개에서 최대 4개 강좌 (온라인) 줌 Live 강좌 진행) (PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
[VOD 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(인프런에서 총 20개 VOD UX 강좌를 오픈했습니다)
(PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
https://www.inflearn.com/users/196290
