웹 디자인 Do! or Don't!

 

웹 디자인은 까다로운 주제입니다. 웹 사이트를 만들 때 고려해야 할 사항이 너무 많기 때문입니다. 이 작업을 단순화하기 위해서 모든 웹 디자이너들은 해야 할 것과 하지 말아야 할 것의 원칙에 대한 목록을 준비해 놓기도 합니다. 하지만 알고 보면 원칙은 단순합니다.

 

웹 디자인에서 단순한 원칙이 무엇인지 알아보기로 합니다!

1. 모든 디바이스에서 비슷한 경험을 누릴 수 있도록 제공

유저는 다양한 유형의 기기를 사용하여 사이트를 방문합니다. 데스크톱이나 노트북, 태블릿, 핸드폰, 뮤직 플레이어 또는 워치로 사이트를 방문할 수 있습니다. 웹 디자인에서 중요한 부분은 방문자가 사이트를 보는 방법이나 사용하는 장치에 관계없이 비슷한 경험을 가져야 한다는 것입니다.

 

유저가 핸드폰으로 사이트를 보고 있는 경우 집에서 데스크톱으로 사이트를 보고 있는 것처럼 문제없이 필요한 모든 것을 찾을 수 있어야 합니다.

2. 사용하기 쉽고 심플한 내비게이션

내비게이션은 사용성의 편리함이 기본입니다. 유저가 자신의 방법으로 내비게이션을 찾을 수 없는 경우 웹 사이트가 얼마나 좋은지 상관하지 않는다는 것을 기억해야 합니다. 사이트의 내비게이션은 다음과 같아야 합니다.

 

• Simple -> 모든 사이트는 가능한 가장 간단한 구조를 가져야 함

• Clear -> 내비게이션 옵션은 유저에게 분명해야 함

• Consistent -> 홈페이지의 내비게이션 시스템은 모든 페이지에서 동일해야 함 

가능한 한 적은 클릭 수를 유지하면서 방문자가 어디로 가고 싶은지를 탐구하고 그들이 필요한 곳을 쉽게 찾을 수 있도록 내비게이션을 디자인해야 합니다. 

 

3. 방문한 링크의 색상 변경 

링크는 내비게이션 진행에 있어서 핵심 요소입니다. 방문한 링크가 색상을 변경하지 않으면 사용자가 실수로 같은 페이지를 반복적으로 다시 방문할 수 있습니다. 방문한 링크의 색상을 분명히 해주면, 이전 위치와 현재 위치를 알고 다음은 어디로 갈지 쉽게 결정할 수 있습니다.

 

First link Second link Third link -> visited Fourth link

유저가 이미 방문한 페이지를 알면 실수로 같은 페이지를 반복해서 방문하지 못하게 됩니다. 

 

4. 페이지를 전체적으로 쉽게 스캔 

유저가 사이트를 방문하면 모든 것을 읽는 것보다 화면을 빠르게 스캔 할 가능성이 높습니다. 따라서 유저가 콘텐츠를 찾거나 작업을 완료하기를 원하면 이동해야 할 곳을 찾을 때까지 검색할 것입니다. 웹디자이너는 훌륭한 시각적 계층 구조를 설계함으로써 사용자의 편의를 도울 수 있습니다. 시각적 계층 구조란 중요성을 암시하는 방식으로 요소를 배열하거나 표현하는 것을 말합니다 (예를 들어 사용자의 눈의 포커스가 어디에서 시작해서 어디로 집중해야 하는지의 흐름).

 

사이트 제목, 로그인 양식, 내비게이션 항목 또는 기타 중요한 콘텐츠와 같은 것들을 포커스로 만들어서 유저가 즉시 볼 수 있도록 디자인해야 합니다.

 

Z 스캔 패턴은 웹 사이트에서 많이 다루는 방식입니다. 

 

5. 모든 링크를 다시 확인 

유저가 사이트의 링크를 클릭하고 응답으로 404 오류 페이지를 수신하면 쉽게 좌절할 수 있습니다. 유저가 콘텐츠를 검색할 때, 404 에러나 예상치 못한 다른 페이지로의 연결 없이 모든 링크가 유저가 원하는 곳으로 연결되기를 기대합니다.

 

 

6. 클릭 가능한 요소를 사용자에게 분명하게 표시 

오브젝트가 어떻게 보이는지는 유저에게 이를 사용하는 방법을 알려줍니다. 링크 또는 버튼처럼 보이지만 클릭할 수없는 시각적 요소 (즉, 링크가 아닌 밑줄이 그어진 단어, 클릭 유도 문안이 있지만 하이퍼 링크되지 않은 요소)는 유저를 쉽게 혼동시킬 수 있습니다. 유저는 페이지의 어느 부분이 일반적인 정적 콘텐츠이고 클릭 가능(또는 탭 가능)한 영역인지를 알아야 합니다.

 

위에 보이는 오렌지색 상자는 실제로는 라벨로 보이는 콘텐츠의 구성요소입니다. 하지만 유저에게는 모양이 버튼처럼 보이기 때문에 혼동을 줄 수 있습니다.

1. 콘텐츠가 로드되는 동안 유저를 기다리게 함 

웹 사용자의 관심과 인내심은 매우 짧습니다. 조사에 따르면 유저의 관심을 사이트에 집중 시키는 데는 10초라는 한계가 있다고 합니다.

 

유저가 사이트가 로드 될 때까지 기다려야 할 때, 사이트가 빨리 로드되지 않으면 좌절감을 느끼고 사이트를 떠날 가능성이 높습니다. 비록 아름답게 디자인된 랜딩 페이지라 하더라도 로딩되는데 시간이 너무 오래 걸리면 사용자가 사이트를 떠나도록 강요할 수 있습니다. 

2. 새 탭에서 링크 열기 

새 탭에서 링크 열기는 뒤로 가는 버튼을 비활성화 시키는 무례한 행동입니다. 사용자가 이전 사이트로 돌아오는 가장 일반적인 방법이 바로 뒤로 가는 버튼이기 때문입니다.

 

 

3. 프로모션을 허용하여 광고를 보도록 유도 

프로모션과 광고는 옆에 있는 콘텐츠를 가리고 유저가 작업을 수행하기 어렵게 만듭니다. 그렇다고 광고와 비슷한 것으로 보이는 것은 유저가 무시한다는 의미는 아닙니다. 그러나 일반적으로 광고와 비슷한 내용은 사용자가 무시하는 편입니다. 이런 현상은 '배너 실명'으로 알려져 있습니다.

 

 

4. Hijack scrolling (스크롤 제압)

스크롤을 강제로 제압하는 것은 디자이너/개발자가 자신의 웹 사이트에서 다르게 동작하도록 스크롤 막대를 조작하는 경우입니다. 애니메이션 효과, 고정 스크롤 포인트 및 스크롤바 자체의 재 설계가 포함될 수 있습니다. 방지된 스키 롤링은 많은 사용자에게 있어서 가장 싫어하는 일 중 하나입니다. 웹 사이트 또는 유저 인터페이스를 디자인할 때 유저가 사이트 또는 응용 프로그램을 통해 탐색 및 이동을 제어하게 할 수 있어야 합니다. 

Apple의 Mac Pro 페이지는 유저가 싫어하는 스크롤 효과를 사용합니다. 페이지의 각 섹션을 점과 함께 나타나는 단일 페이지 parallax 레이아웃을 사용합니다.

5. 사운드가 있는 비디오 자동 재생 

백그라운드에서 비디오, 음악 또는 사운드를 자동으로 재생하여 사용자를 짜증 나게 합니다. 이러한 요소는 적합하다고 예상될 때만 적절게 사용해야 합니다. 예를 들면, Facebook 동영상은 자동 재생으로 설정되지만 사용자가 동영상을 보고 있다는 의미가 아니라면 (예 : 동영상과의 상호 작용을 통해) 소리가 나지 않습니다. 

6. 아름다움을 위해서 유저의 사용성 희생 

사이트 또는 유저 인터페이스의 디자인이 유저가 화면에서 콘텐츠를 사용할 수 있는 능력을 방해해서는 안됩니다. 콘텐츠 뒤에 빠른 배경, 사이트의 가독성 또는 색 대비가 떨어지는 색 구성표는 피하는 것이 중요합니다. 

7. 깜박이는 텍스트와 광고를 사용 

깜박이는 콘텐츠는 감수성이 있는 유저의 경련을 유발할 수 있습니다. 경련을 일으킬 수 있을 뿐만 아니라 일반적으로 유저를 괴롭히거나 산만하게 하는 경향이 있습니다.

 

깜박이는 텍스트를 피하십시오!

 

결론적으로 요약하면, 인터넷의 발전에 따라 유저의 웹 사용 방법의 수준은 나날이 높아지고 있습니다. 유저는 스스로 탐색하는 방법을 알고 있으므로 그들에게 강요하지 마십시오.

 

웹은 모든 사람들을 위한 것입니다. 디자이너와 개발자는 단순히 콘텐츠 전달자 일뿐입니다. 유저는 궁극적으로 어떤 콘텐츠를 보고 싶은지를 결정하는 사람이며 콘텐츠 전달자로서 이를 조작할 수 있는 곳이 아닙니다. 대신 웹 디자이너의 사명은 가능한 한 신속하고 효율적이며 우아하게 모든 콘텐츠를 제공해야 합니다.

 

지금까지 웹 디자인에서 해야 할 것과 하지 말아야 할 것에 대한 단순한 원칙을 알아보았습니다. 이 포스트를 공감하시면 꾹 눌러주세요!