웹 UX 디자인을 좋게 만드는 8가지 방법

UX 디자인이라고 아시나요? 웹 디자인에서 가장 중요한 요소는 편리한 탐색, 간결하고 효과적인 페이지, 링크, 그리고 좋은 콘텐츠입니다. 전부 사용자를 배려하기 위한 요소들이죠. 

 

지난 시간에는 웹디자인 뿐만 아니라 모든 디자인 분야에 적용되는 디자인 원칙에 대해 이야기했었습니다.

 

2021.12.08 - [기획] - 꼭 알아야할 웹디자인 기초 원칙 6가지

꼭 알아야할 웹디자인 기초 원칙 6가지

 

이번엔 좀 더 범위를 좁혀서, 웹사이트에서 사용자의 경험과 연관된 디자인에 대해서 얘기해보겠습니다. 

 

 

아래에 소개해드릴 요소들은 UX(사용자 경험 디자인)와 연관되어있습니다. 사이트에 색상과 그래픽 등을 추가할 때 이러한 점을 생각하면 좋은 디자인을 할 수 있을 것입니다.

 

 

웹 UX 디자인을 개선하는 8가지 방법

 

1. 적은 선택

출처 : voytech

 

힉의 법칙에 따르면, 추가적인 선택이 늘어날수록 결정을 내리는 데 필요한 시간이 증가한다고 합니다. 선택지가 많을수록 선택하기가 어려운 것은 사실입니다. 

 

단지 선택이 어려운 것뿐만이 아닙니다. 사용자가 사이트를 벗어날 수 있습니다.

 

많은 선택을 하는 것보다 아무것도 선택하지 않는 것(사이트를 벗어나는 것)이 더 쉽습니다. 따라서 사용자에게 너무 많은 선택을 하게 해서는 안됩니다.

 

※ 웹 사이트의 디자인을 개선하려면 설계 프로세스 전반에 걸쳐 주의를 분산시키는 요소를 제거하도록 합시다. 선택 대신에, 의사결정을 돕는 필터를 추가하세요. 

2. 폰트 및 타이포그래피 

왼쪽: 산셰리프(고딕), 오른쪽 : 셰리프(명조)

 

폰트는 텍스트가 웹 페이지에 표시되는 방식입니다. 대부분의 웹 페이지는 많은 양의 텍스트를 포함하므로, 텍스트를 디자인하는 것은 필수입니다.

 

타이포그래피 디자인을 생각할 때는 텍스트, 블록 배치 및 텍스트 크기와 모양뿐만 아니라 폰트의 아주 세밀한 부분까지 고려해야 합니다. 

 

폰트는 크게 셰리프(명조), 산-셰리프(고딕)로 나눌 수 있으며 각각 본문과 제목에 주로 사용됩니다.

3. 색상 구성

출처 : 셔터스톡

 

색은 가장 효과적인 디자인 요소입니다. 모든 디자인과 브랜드, 그리고 웹사이트는 색상 구성표를 가지고 있습니다. 

 

사이트의 브랜드 아이덴티티를 높이고, 각 페이지에서 유기적으로 어우러지도록 색상을 선택합니다. 색상표를 결정하는 것은 중요한 단계이므로 신중하게 고려해야 합니다.

 

※ 웹사이트 색상을 구성할 때는 난색보다는 한색을 추천합니다. 난색은 시간의 흐름을 더 빠르게 느끼고, 한색은 상대적으로 오래 머무르게 한다고 합니다.

4. 그래픽 및 이미지 사용

 

인터넷은 매우 시각적인 매체이며, 시선을 사로잡는 사진과 그래픽은 사용자의 참여도를 높여줄 수 있습니다.

 

텍스트가 많을 수밖에 없는 웹에서, 텍스트의 내용을 한눈에 보여주는 이미지의 힘은 막대합니다.

 

※ IMG 태그의 ALT 속성을 사용하여 이미지가 무엇인지 검색엔진에게 알려주는 것을 잊지 마세요. 웹은 모두가 이용할 수 있어야 하고, 시각 장애인도 당연히 이용할 수 있어야 하니까요.

5. 내비게이션 사용

 

내비게이션은 방문자들이 한 페이지에서 다른 페이지로 이동하여 탐색할 수 있게 해 줍니다.

 

내비게이션을 디자인하기 전에, 먼저 웹 사이트 구조(정보 아키텍처)가 적절한지 확인해야 합니다. 또한 방문자들이 검색 기능에 의존하지 않도록, 원하는 페이지를 쉽게 찾고 읽을 수 있어야 합니다. 

6. 반응형 디자인

 

오늘날의 온라인 환경에서는 반응형 웹 설계(RWD)를 고려하는 것이 매우 중요합니다. 반응형 디자인은 웹페이지를 보는 장치의 너비에 따라 레이아웃을 변경하는 것입니다. 

 

방문자는 모든 크기의 데스크톱, 스마트폰 및 태블릿에서 이 기능을 볼 수 있어야 하며 이는 css코딩 이전에 디자인 단계에서 반응형 디자인을 고려해서 디자인해야만 합니다.

7. 중요한 것은 크게

 

큰 것이 항상 좋은 것은 아닙니다. 그럼에도 불구하고, 물체가 크고 가까울수록 사용하기가 쉽다는 것은 당연한 이치입니다.

 

버튼을 2개 만든다고 하면, 중요하거나 사용해주길 바라는 버튼의 크기를 20% 정도 키웁니다. 사람들은 무의식적으로 클릭하기 쉬운 큰 버튼을 누릅니다. 

8. 단순화

 

오컴의 면도날이라는 용어가 있습니다. 가장 적은 조건과, 가장 간단한 설명을 제공하는 것을 선택한다는 이론입니다. 중복과 부가적인 설명은 면도날로 자른다는 거죠. 

 

웹디자인의 맥락에 대입해보아도 적용되는 이론입니다. 중복은 없애고, 간결하게 만듭시다.

 

너무 많은 기능, 버튼, 그것들이 가져오는 혼란보다는 단순한 디자인이 좋습니다. 그러기 위해서는 기능과 정보구조 등의 사이트 설계를 단순하게 해야 합니다. 왜 단순해야 할까요?

 

복잡하고 무엇을 나타내는지 알 수 없는 웹사이트에 사용자는 오래 머무르지 않기 때문입니다.

 

단순하고 미니멀리즘적인 디자인이 성공을 보장하지는 않습니다. 그러나 간단한 것이 복잡함보다 훨씬 낫기 때문에 웹 사이트의 디자인을 단순화하기 위해 노력해야 합니다.

읽어주셔서 감사합니다.