모든 트렌드가 가치가 있습니까? 웹 디자이너가 저지르는 가장 흔한 5가지 UX 실수

"우아함은 불필요한 것을 모두 버리고 인간이 단순함과 집중을 발견할 때 달성됩니다. 자세는 단순하고 냉정할수록 더 아름다울 것입니다." -파울로 코엘료

웹 디자이너의 임무는 매력적인 사용자 경험을 만들고 사이트 방문자가 작업을 수행할 수 있도록 지원하며 전환율을 높이는 것입니다. 그 과정에서 미학에만 치중하고 지름길을 택하다 결국 다양한 공통적인 디자인 패턴과 트렌드에 의존하게 된다. 이는 유행하는 트렌드에 휘둘릴 수 있고, 결과적으로 트렌드가 부적절하게 배치되어 일반적인 UX 실수를 저지를 수 있다는 위험이 있습니다.

웹과 관련하여 사람들은 무언가를 배우고 싶어하는 것이 아니라 무언가 를 하기를 원합니다. 웹에는 디자이너가 시각적인 매력에만 집중하고 사용성을 희생한 사례가 많이 있습니다. 그들은 디자인을 주도한 "와우 순간"이 그 자체로 사용자의 관심을 끌 만큼 강력할 것이라고 추정했습니다. 그러나 슬프게도 사용자는 UI를 이해하는 데 어려움을 겪고 있으며 사이트를 사용하는 데 심각한 어려움을 겪고 있으며 사이트의 이탈률이 급증했습니다.

Kate Rutter가 말했듯이 "못생겼지만 유용한 사람이 예쁘지만 무의미한 사람을 능가합니다." 웹 디자인 패턴과 트렌드를 효과적으로 사용하는 핵심은 미학적으로 보기 좋은 것과 가치를 더하는 부분 사이의 균형을 찾는 것입니다.

몇 가지 일반적인 UX 실수를 살펴보겠습니다.

웹 디자인의 일반적인 UX 실수 1: 크고 고정된 헤더

웹사이트에서 점점 더 높은 고정 헤더를 볼 수 있습니다. 위치가 고정되어 있고 상당한 공간을 차지하는 "브랜딩 블록" 및 탐색 메뉴. 그들은 브라우저 창의 상단("고정 헤더")에 붙어 있고 종종 그 아래에서 스크롤되는 콘텐츠를 차단합니다.

대형 브랜드 웹사이트의 일부 헤더는 높이가 150픽셀을 초과합니다. 그들의 가치는 어디에 있습니까? 고정 헤더와 같은 고정 요소는 실질적인 이점이 있을 수 있지만 웹 디자이너는 이를 사용할 때 주의해야 합니다. 고려해야 할 몇 가지 중요한 UX 문제가 있습니다.

고정 탐색 헤더가 너무 커서 편안함을 느낄 수 없음

고정 탐색 헤더를 사용하기로 결정했다면 사용자와 함께 테스트하는 것이 가장 좋습니다. 너무 지나쳐서 끈적한 탐색 헤더를 콘텐츠로 채우는 것은 일반적인 UX 실수입니다. 고정 헤더를 사용하면 방문자가 여전히 편안하게 탐색할 수 있습니다. 적절한 균형을 찾지 못하면 주요 콘텐츠를 위한 약간의 공간과 방문자에게 숨막히는 밀실 공포증이 있는 사이트 경험을 남길 수 있습니다.

때로는 CSS를 사용하여 간단한 해결 방법이 있습니다. 고정 헤더를 약간 투명하게 만들어 사람들이 스크롤할 때 여전히 콘텐츠를 볼 수 있으므로 콘텐츠 영역이 더 크게 느껴집니다.

다음은 로저 페더러의 ATP 선수 프로필 페이지입니다.

이 사이트의 고정 헤더 높이가 180px 이상입니다! 이는 일부 랩톱에서 전체 페이지 높이의 30% 이상입니다. 이는 피할 수 있는 열악한 사용자 경험입니다.

모바일에서 고정 탐색 헤더 UX 문제를 고려하지 않음

어떤 사람들은 고정 탐색 헤더가 상호 작용 속도를 높일 수 있는 대형 고해상도 컴퓨터 디스플레이를 사용할 수 있지만 모바일은 어떻습니까? 의심할 여지 없이 상당한 수의 사이트 방문자가 모바일 장치에서 사이트에 액세스하므로 고정 헤더가 최선의 아이디어가 아닐 수 있습니다. 운 좋게도 반응형 디자인 기술을 사용하면 다양한 플랫폼에 대해 다양한 솔루션을 디자인할 수 있으며 데스크톱 브라우저용으로 의도된 끈적한 탐색 헤더를 고수할 수 있습니다.

Coffee with a Cop 사이트에도 고정 헤더가 있지만 높이는 80픽셀 미만으로 훨씬 작습니다.

이 경우 헤더 탐색은 보다 효율적인 탐색을 가능하게 하므로 틀림없이 고해상도 화면에 적합한 솔루션입니다. 더 작은 해상도 화면에서는 헤더도 고정되지만 상당한 공간을 차지합니다. 모바일에서 고정 탐색 헤더에 대한 훌륭한 대안은 항상 존재하는 햄버거 메뉴입니다. 이 패턴이 보편적인 문제 해결자는 아니지만 상당한 공간을 확보합니다.

웹 디자인의 일반적인 UX 실수 2: 얇고 가벼운 글꼴

오늘날 얇고 가벼운 글꼴은 수많은 모바일 앱과 웹사이트에 널리 퍼져 있습니다. 화면 기술의 발전과 렌더링의 향상으로 우아하고 깔끔하며 트렌디한 디자인 때문에 많은 디자이너들이 사용하고 있습니다. 그러나 얇은 서체는 사용성 문제를 야기하여 UX를 방해할 수 있습니다.

웹사이트에 있는 모든 텍스트의 목표는 가독성에 있으며 얇은 활자는 가독성에 심각한 영향을 미칠 수 있습니다. 모든 방문자가 얇은 활자를 잘 렌더링하는 디스플레이에서 사이트를 보는 것은 아닙니다. 일부 조명 유형은 Retina 디스플레이가 있는 iPhone 또는 iPad에서 읽기가 어렵습니다.

무엇보다 텍스트는 읽을 수 있어야 합니다. 사용자가 앱의 단어를 읽을 수 없다면 타이포그래피가 얼마나 아름다운지는 중요하지 않습니다.

Apple 휴먼 인터페이스 지침

Apple은 모바일 앱을 언급하지만 웹 사이트에도 동일한 원칙이 적용됩니다. 가독성은 좋은 사용성을 위해 선택 사항이 아니라 필수 사항입니다. 읽을 수 없는 웹사이트에 콘텐츠를 올려놓는 것은 의미가 없습니다.

다음은 씬 유형을 사용하기 전에 고려해야 할 몇 가지 일반적인 UX 실수입니다.

트렌디하기 때문에 얇고 가벼운 글꼴 사용

글꼴은 보기에 좋을 뿐만 아니라 읽을 수 있어야 합니다. 적절한 대비와 가독성을 얻으려면 디자이너는 디자인에서 크기, 무게 및 색상과 같은 최적의 조합을 위해 노력해야 합니다.

다양한 기기와 화면 크기에서 사이트를 테스트하여 모든 사이트 텍스트를 읽을 수 있는지 확인하는 것이 가장 좋습니다.

이는 다음과 같은 일반적인 UX 실수로 이어집니다.

모든 주요 장치에서 텍스트 가독성을 테스트하지 않음

얇고 가벼운 유형은 많은 디자이너의 값비싼 미세 조정 모니터에서 좋아 보일 수 있지만 더 저렴하고 표준 이하의 디스플레이에서 우리 디자인을 자주 보는 일반 사용자도 고려해야 합니다. 가장 좋은 방법은 데스크톱 컴퓨터, 랩톱, 태블릿 및 스마트폰과 같은 모든 주요 장치에서 글꼴이 어떻게 보이는지 확인하는 것입니다.

예를 들어 모바일 디자인을 테스트하는 동안 참가자가 낮에 모바일 장치에서 사이트를 사용하도록 하십시오. 실제 사용자가 항상 완벽한 탐색 및 조명 조건을 가지는 것은 아닙니다. 웹 사이트에서 얇은 글꼴을 사용하는 경우 모바일 사용자에게 적용할 수 있는 간단한 방법이 있습니다. 모바일에서 더 나은 가독성을 위해 두꺼운 글꼴을 지정하는 것입니다.

웹 디자인의 일반적인 UX 실수 3: 대비가 낮은 텍스트

낮은 색상 대비 요소를 사용하는 것도 현대적인 사용자 인터페이스 디자인에서 유행이 되었습니다. 일부 영역의 대비를 줄임으로써 디자인이 "미니멀리즘"하게 보이기 때문에 미니멀리스트 디자인 트렌드에서 성장했습니다. 디자이너는 제시해야 하는 정보의 복잡성을 줄일 수 없었으므로 디자인에서 낮은 대비를 사용했습니다.

우리는 이미 얇은 글꼴을 다루었지만 더 큰 함정이 있습니다. 낮은 가독성으로 인해 UX를 심각하게 방해하는 낮은 대비와 가벼운 글꼴의 조합 입니다. 디자이너는 이 사용성 함정을 피하기 위해 할 수 있는 모든 일을 해야 합니다.

본문 복사의 낮은 텍스트 대비

Cool Springs Financial은 웹사이트의 본문 텍스트에 Helvetica의 얇은 변형을 사용합니다. 우아해 보이고 미학적으로 즐거운 UI에 기여하지만 여러 플랫폼에서 읽기가 어렵습니다. 낮은 대비가 반드시 나쁜 것은 아니지만 텍스트를 읽기 어렵게 만들어 웹 사이트의 사용성에 부정적인 영향을 줄 수 있습니다.

텍스트 대비를 테스트하지 않음

웹 콘텐츠 접근성 지침에 따라 디자이너가 올바른 텍스트 대비를 설정하는 데 도움이 되는 Colorable이라는 웹 대비 확인을 위한 멋진 도구가 있습니다. 디자이너가 올바른 텍스트 대비를 사용하고 있다는 것을 알게 되면 웹사이트에서 다른 색상을 조정하고 빠른 다중 장치/사용자 테스트를 수행하여 텍스트를 읽을 수 있는지 확인할 수 있습니다.

웹 디자인 일반적인 UX 실수 4: 스크롤 하이재킹

웹에서 입지를 굳히고 있는 또 다른 고위험 추세는 "스크롤 하이재킹"입니다. 이 추세를 구현하는 웹사이트는 페이지 스크롤을 제어합니다(일반적으로 JavaScript 사용). 사람들이 이를 접하면 더 이상 페이지 스크롤을 제어할 수 없고 동작을 예측할 수 없으므로 혼란과 좌절로 쉽게 이어질 수 있습니다. 웹사이트 사용성을 해치고 최악의 경우 "컴퓨터 분노"를 유발할 수 있는 위험한 실험입니다.

일부 웹사이트는 스크롤 하이재킹을 피해갈 수 있지만 그렇다고 모든 사람이 할 수 있는 것은 아닙니다. 예를 들어, 많은 웹 디자이너는 스크롤 하이재킹, 시차 효과 및 다양한 제품의 고해상도 이미지를 사용하여 Apple 사이트를 따릅니다. Apple은 목표 시장, 고유한 개념 및 웹 사이트에 대한 독점 콘텐츠를 보유하고 있습니다. 모든 사이트에는 고유한 문제가 있으므로 해당 문제에 맞는 고유한 솔루션도 있어야 합니다.

실제 사용자와 테스트하지 않음

트렌디한 아이디어나 UI 패턴을 빌릴 때는 UX 문제를 피하기 위해 실제 사용자에게 웹사이트 프로토타입을 테스트하는 것이 가장 좋습니다. 간단한 사용성 테스트를 통해 예를 들어 스크롤 하이재킹의 구현이 가능한지 여부를 알 수 있습니다. 테스트 없이 디자이너는 스크롤 하이재킹이 작동하는지 알 방법이 없으며 가정하는 데 비용이 많이 드는 경우가 많습니다.

인기 있는 개인 블로그 사이트인 Tumblr는 홈페이지에서 스크롤 하이재킹을 사용합니다. 그렇게 하는 것은 위험할 수 있지만 그들이 대상 청중과 그들이 제시하고자 하는 멋지고 트렌디한 사용자 경험을 잘 알고 있다고 가정하는 것이 안전합니다. 사이트 방문자가 스크롤을 시작하면 스크롤이 도용되고 사람들은 다음 섹션으로 이동합니다.

긴 스크롤 페이지는 채도가 높은 색상과 창 왼쪽의 두드러진 표시 점으로 구분할 수 있는 여러 섹션으로 나뉩니다. 결과적으로 Tumblr의 홈페이지는 방문자가 통제할 수 있는 커다란 수직 회전 목마처럼 느껴집니다. 자신만의 마음을 가진 불쾌하고 실험적인 웹사이트라기 보다는 말이죠.

웹 디자인의 일반적인 UX 실수 5: 캐러셀

다양한 콘텐츠를 순환하는 슬라이드쇼인 캐러셀은 웹, 특히 방문 페이지와 홈페이지에서 매우 일반적입니다. 유용할 수 있지만 많은 사용성 문제가 있으므로 또 다른 일반적인 UX 실수로 간주됩니다. Nielsen Norman Group에 따르면 " 사람들은 종종 이러한 큰 이미지를 즉시 스크롤하여 그 안에 있는 모든 콘텐츠를 놓칩니다 ." 방문자가 회전하는 슬라이드 중 일부에서 귀중한 콘텐츠를 보지 못할 수 있으므로 UX에 부정적인 영향을 미칠 수 있습니다.

웹사이트 캐러셀이 사용자에게 가치를 제공하지 않을 수 있음

제대로 수행되면 캐러셀은 눈에 띄는 큰 이미지로 사용자의 관심을 끌 수 있습니다. 문제는 회전 목마가 종종 추가 가치를 추가하지 않고 단순히 장식용으로 존재하며 다른 사람들이 사용하기 때문에 포함된다는 것입니다. 사이트 캐러셀이 의미가 있는지 테스트하는 방법: 캐러셀이 방문자에게 제공하는 세 가지 이점을 적어 보십시오. 세 가지 의미 있는 혜택을 찾지 못한다면 아무런 가치가 없습니다.

이전 및 다음 화살표의 검색 가능성이 낮습니다.

다음 및 이전 화살표를 검색할 수 없는 경우 웹 사이트 캐러셀의 중요한 정보가 숨겨져 있을 수 있습니다. 컨트롤은 모바일에서도 탭 호환이 가능해야 합니다.

회전 목마를 제어하는 ​​화살표가 없는 경우가 많습니다. 슬라이드 표시기 점만 포함되어 슬라이드를 진행합니다. 그러나 종종 대비가 낮고 검색 가능성이 낮으며 클릭하거나 탭할 수 있는 영역이 충분하지 않습니다. 클릭 가능한 작은 타겟은 UX 저하, 웹사이트 방문자의 불만, 웹사이트의 빠른 이탈로 이어질 수 있습니다.

예를 들어, Floresta Longo Foundation 웹 사이트의 홈페이지에는 회전하는 회전식 이미지 캐러셀이 있습니다. 자동 재생으로 설정되어 있으며 5장의 사진을 회전합니다. 그러나 이전 및 다음 화살표는 작고 투명하여 찾기 어렵고 클릭하기 어렵습니다. 슬라이드 방문자에 대한 표시기가 없으며 이미지가 나타내는 것을 나타내는 레이블도 없습니다. 이미지는 링크가 아니며 순수한 장식 역할을 합니다. 이러한 유형의 회전 목마는 방문자의 참여를 유도하는 데 어느 정도 가치가 있을 수 있지만 전반적으로 많이 필요합니다.

결론

웹 디자인 트렌드는 신중하게 고려하지 않고 신중하게 구현하지 않으면 몇 가지 일반적인 UX 실수로 이어질 수 있습니다. UX 디자이너는 최선의 판단을 내려야 하고 혁신을 두려워하지 않아야 합니다. 그러나 웹사이트 사용성을 높이려면 실제 사용자와 함께 자신의 디자인을 철저히 테스트하는 것이 좋습니다.

미친듯이 넘쳐나는 웹 디자인 트렌드에서 유행하는 것들은 왔다가 사라집니다. 이러한 혼돈 속에서 미학, 효율성, 사용성의 균형 있는 사용은 가장 강력하고 사용자에게 가장 큰 호응을 얻은 UX 트렌드를 구별하는 데 중요한 역할을 합니다.

웹 디자이너는 가장 멋진 색 구성표, 가장 멋진 스크롤 애니메이션 또는 가장 환상적인 시차 효과를 생각해낼 수 있지만 결과적으로 인간의 상호 작용이 저하되면 UX가 열악하고 사람들은 빠르게 이동합니다. 클릭 한 번이면 다른 사이트를 방문할 수 있습니다.

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

• 반응형 디자인 – 모범 사례 및 고려 사항
• 브라우저에서 웹사이트 디자인 프로세스에 접근하기
• 디자이너를 위한 코딩 – 우리는 얼마나 알아야 할까요?
• UI 디자인 모범 사례 및 일반적인 실수