원문 : https://www.smashingmagazine.com/2008/01/10-principles-of-effective-web-design/
10 Principles Of Good Web Design — Smashing Magazine
If users can’t use a feature, it might as well not exist. Let’s explore the guidelines of good web design and effective interface design.
www.smashingmagazine.com
위의 아티클은 디자인은 차치하고, 유용성과 유틸리티는 웹사이트의 성공과 실패를 가른다고 한다. 유저들이 웹사이트와 어떻게 인터렉트하는지 다루기 전, 사용자들이 어떻게 생각하고 어떤 행동 패턴을 하는지 알아보며 본문을 시작한다. 아티클에서 제공하는 정보를 정리하며, 적합할 것 같은 예시를 덧붙이거나 비슷한 맥락의 생각들을 적어봤다.
유저들은 어떻게 생각하는가?
1. 사용자들은 정보의 질과 신뢰성에 집중한다.
수수한 웹사이트의 트래픽이 높은 경우를 종종 볼 수 있다. 1990년도에 출시된 영화 데이터베이스 서비스 IMDb는 2019년 Alexa에 의해 인터넷에서 52번째로 많은 방문자 수를 기록했으며 2022년에는 830만명의 사용자 수를 기록했다. 아래의 이미지는 IMDb의 페이지 중 하나이다.
명성과 비교하여 디자인적으로 훌륭한 부분을 찾을 수 없으나 사용자는 이 웹사이트의 디자인을 감상하러 오는 것이 아니다. 영화 정보와 영상 관련 컨텐츠를 검색하고 관람한 영화의 평점을 매기기 위해, 그리고 내가 본 영화들을 기록하기 위해 IMDb를 꾸준히 이용하고 있다.
2. 사용자는 읽지 않는다. 훑어본다.
[(사용자를)생각하게 하지 마!]에서는 사용자가 웹사이트를 훑는 것이 마치 달리는 자동차에서 광고판을 보는 것과 같다고 비유한 바가 있다. 빠르게 훑을 광고 타겟층을 위해 간단하고 임팩트 있는 광고물을 만들듯이 너무 많은 내용을 한 페이지에 넣으려는 순간 사용자들은 내용을 뭉텅이로 훑어 넘길 가능성이 높아진다.
3. 웹 사용자들은 인내하지 않으며 즉각적인 만족을 요한다.
아주 간단한 원칙이 있다. 매정하게 들리지만, 만일 웹사이트가 사용자의 기대에 부응하지 못했다면 디자이너는 일을 제대로 하지 않은 것이며 회사는 그만큼 손해를 본다는 것이다. 웹사이트 이용시 인지 부하가 높고 탐색이 덜 직관적일 수록 사용자는 이를 대체할 다른 웹사이트를 검색하려 한다. 직관적일 수록 더 많은 사용자들을 웹사이트에 붙잡아 둘 수 있다.
4. 사용자들은 최고를 선택하지 않는다.
나름의 합리적인 옵션을 찾은 사용자는 최고의 옵션을 찾기 위해 다시 브라우징을 시작하는 것 보다 그 선택을 고수할 가능성이 크다. 사이트의 한 섹션에서 다른 섹션으로 리니어하게 이동하지 않고 스크롤하다 목적 달성에 적합해 보이는 링크가 보인다면 바로 클릭하기 때문이다. 이내 최적의 선택지를 찾기 위해 검색을 이어갈 수 있겠지만 합리적인 옵션을 선택하는 것이 사용자에게는 더 빠르고 효율적이다.
5. 사용자들은 그들의 감을 따른다.
새로 산 노트북의 사용 설명 책자를 읽어본 적 있는가? 노트북을 스스로 해체할 때 한 번 훑을 수 있겠지만 대부분은 디자이너가 제공하는 설명서를 읽지 않는다. 사용자에게는 제품이 작동하는 한 그것이 무엇으로, 어떻게 작동하는지는 중요하지 않기 때문이다. 좋은 의도로 무언가를 만들었더라도 사용자에게 와닿지 않는다면, 직관적인 정보를 전달할 수 있는 디자인으로 수정되어야 한다.
6. 통제권은 사용자에게 있는 것이 좋다.
사용자는 페이지의 일관된 정보들 사이에서 통제권을 쥐고싶어 한다. 일관된 사이트 섹션은 어떤 기능을 하고 정보를 담고있는지 예상하기 쉽기에 능동적이고 주체적으로 브라우징할 수 있다. 그러나 예상치 못한 팝업들은 웹사이트 이용 의욕을 저하시킨다.
좋은 웹 디자인의 10가지 원칙
1. 사용자를 생각하게 하지마!
스티븐 크룩의 [(사용자를) 생각하게 하지마!]를 완독하지는 않았지만 절반가량 읽어온 바로는 사용자의 직관과 통제권을 유지하며 정보를 배치하는 법을 반복해서 설명한다. 사용자에게 전달할 가장 중요한 정보가 무엇이며 이것을 어떻게 배치해야 효율적으로 전달 되는지, 그 외의 필요 없는 것들로 어떤 것이 있으며 강조된 정보를 해치지 않는 선에서 어떻게 배치되어야 하는지 고려해야 한다.
애플 스토어의 역할은 제품 소개와 제품 판매이다. 가장 상단의 'Store, The best way to buy the products you love'의 마케팅 문구는 큰 영역을 차지하고 있지 않다. 어떤 종류의 제품이 보여주는 영역도 비슷하다. 가장 큰 영역을 차지하고 있는 것은 가장 최근에 런칭된 신제품 라인. 'The latest. Take a look at what's new right now.'는 아래 이미지들이 어떤 테마로 묶였는지 나타내기만 할 뿐 신제품 라인보다 튀지 않고 있다. 따라서 이 페이지에서 가장 보여주고 싶은 것은 iPhone 16 Pro를 시작으로 수평나열된 제품들임을 아주 쉽게 알 수 있다.
2. 사용자의 인내심을 테스트하지 말아라
사용자들은 서비스를 부담없이 사용하고 싶어하지 미래에 쓰지도 않을 계정의 긴 양식을 채우고 싶어하지 않아한다. 따라서 사용자에게 최소한의 액션을 요구하는 것이 좋다. 이 웹사이트에 어떤 서비스가 있는지 훑어보는 과정에서 최소한으로 요구해야 더 많은 방문자들이 실제로 서비스를 사용하기 때문이다. 우선 웹사이트를 자유롭게 훑도록 두고 사용자에게 사적인 정보를 기입하기를 강요하지 않으며 그들이 필요한 기능을 발견하도록 두어야 한다.
3. 사용자의 관심을 끌 수 있도록 운영하라
움직임 없는 컨텐츠와 모션감 있는 컨텐츠를 동시에 제공할 경우 사용자는 움직이는 이미지에 더 이끌리게 된다. 글과 이미지, 라이트한 폰트와 볼드한 폰트도 마찬가지이다. 산만한 광고들은 사실 이러한 원리를 잘 이용한 작업물일 뿐이다.
화려한 색감 없이도 어떤 브랜드에서 무슨 상품을 얼마나 할인하는지 보여주는 사례이다. 사용자에게 처음으로 다가오는 메시지는 '15% 할인'이며 신발을 들고있는 모델의 이미지로 할인 대상이 신발 브랜드임을 쉽게 알 수 있다. 그 옆의 '20+10% 할인' 배너 또한 슬랙스나 팬츠를 판매하는 브랜드임을 짐작하게 한다.
이러한 시각적 요소는 방문자가 깊게 생각하지 않아도 A지점에서 B지점으로 이동하는 것에 도움을 준다. 이용시 물음표가 적게 생길수록 그들은 더 나은 방향 감각으로 사이트를 브라우징할 수 있으며 이러한 정보를 제공하는 회사에 더 많은 신뢰를 쌓을 수 있다. 따라서, 생각할 필요가 적을 수록 사용자 경험은 더욱 좋아지는 것이다.
4. 사용자에게 기능을 노출하기 위해 노력하라
사용자가 어떤 기능을 사용할 수 있는지 알 수 있게 하는 것은 성공적인 사용자 경험 디자인의 기초적인 원칙이다. 과정은 중요하지 않다. 어떤 방식이 이해기 쉽고 사용자들이 시스템과 편안하게 상호작용 하도록 돕는지 고려하는 것이 가장 중요하다.
5. 효과적인 글쓰기
인쇄물과 달리 웹은 사용자의 선호도와 브랑우징 습관에 맞춘 글쓰기가 필요하다. 이미지나 키워드를 볼드로 강조하지 않은 텍스트들은 아무런 정보를 전달하지 못하고 스킵된다. 과장되고 추상적이라 메시지를 전달하지 못하는 경우도 마찬가지다. 귀엽거나 똑똑해보이려는 이름, 마케팅 유도가 강하게 느껴지는 이름, 익숙하지 않은 전문단어로 구성된 이름, 특정 회사만을 나타내는 이름은 피해야 한다.
직관적인 단어들로 구성된 Figma 요금제 및 가격 페이지다. '팀에 적합한 요금제를 선택하세요'에서 사용자는 본인 혼자만 사용할 것인지, 여러 사람과 함께 사용할 것인지 생각한다. 그 후 명시된 가격을 보고 하위 그린 체크박스로 강조된 서비스를 훑어 필요한 요금제가 무엇일지 비교한다. 만일 이 페이지의 '무료'대신 '무려어떠한 광고나 15~75달러를 아끼는 요금제'같은 다른 단어가 적혀 있다면 사용자는 이 요금제가 얼마인지 직관적으로 알 수 없을 것이다.
6. 최대한 간소화하도록 노력하라
KIS (Keep it simple) 원칙은 사이트 디자인의 최우선 목표가 되어야 한다. 사용자가 디자인을 구경하러 사이트에 방문하는 경우는 드물다. 대부분은 디자인과 관계없이 정보를 얻기 위해 방문한다. 방문자 관점 최고의 디자인은 광고나 불필요한 팝업 없이 사용자가 찾고있던 컨텐츠와 정확히 일치하는 깔끔한 텍스트다. 사이트 정보를 명확히 제시하고 과밀화된 불필요한 컨텐츠를 없앨 수록 만족도는 증가한다.
7. 여백을 무서워하지 말아라
사실 여백을 과대평가 하는 것은 매우 힘든 일이나 여백은 사용자의 인지 부하를 줄이고 화면의 정보들을 인식하는 것을 돕는다. 디자인된 레이아웃에 도달할 때 사용자는 화면을 훑고 정보들을 쉽게 이해하기 위해 컨텐츠 영역을 눈으로 분류한다. 그러나 복잡한 구조는 읽고 분석하기에 더 어렵다. 눈에 보이는 선이나 공백으로 디자인을 나눠야 한다면 공백으로 분리하는 것이 더 낫다.
8. "돋보이는 언어"로 효과적인 의사소통
효과적인 시각적 의사 소통에 관한 글에서 Aaron Marcus는 "가시적인 언어"의 사용에 대해 세 가지 기본 원칙을 설명한다.
- 구성: 사용자에게 명확하고 일관된 개념 구조를 제공한다. 일관성, 화면 레이아웃, 관계 및 탐색 가능성은 조직의 중요한 개념이다. 모든 요소에는 동일한 관습과 규칙이 적용되어야 한다.
- 절약: 단순성, 명확성, 독특성, 강조점을 고려해 최소한의 단서와 시각적 요소로 최대한의 효과를 얻는다. 단순성은 의사소통에 가장 중요한 요소만 포함됨을, 명확성은 모든 구성요소가 애매하거나 모호하지 않도록 설계되어야 함을 말하며 구별성은 필수 요소의 중요한 속성은 구별 가능해야 함을 뜻한다. 강조점은 가장 중요한 요소는 쉽게 인식되어야 한다는 것이다.
- 의사소통: 프레젠테이션을 사용자의 능력에 맞게 조정한다. 인터페이스는 성공적인 의사소통을 위해 읽기 쉬운 정도, 가독성, 타이포그래피, 상징성, 다중 보기, 색상 또는 질감의 균형을 유지해야 한다. 최대 3가지의 폰트와 최소 3포인트, 최대 18 단어나 텍스트의 라인에 50~80자를 사용한다. (영문 기준)
9.관습은 우리의 친구
사이트 요소를 관습적으로 디자인 하더라도 웹사이트가 지루해지는 것은 아니다. 사실 관습은 작동 방식을 알아내야 하는 수고를 덜어주므로 아주 유용하다. 이러한 규칙은 사용자에게 자신감과 신뢰를 주고 디자인의 맥락을 알 수 있게 해준다. 사용자의 예상에 맞춰 사이트 탐색, 텍스트 구조, 검색 배치을 설정해야 한다. 스티븐 크룩은 더 나은 아이디어에 대한 확신이 있을 때만 새로운 시도를 권장하지만 아닐 때는 관습의 이점을 이용하기를 권장한다.
10. 빨리, 자주 테스트해라
사용성 테스트는 종종 주어진 레이아웃과 관련된 중요한 문제와 이슈들을 알 수 있는 주요 인사이트를 주기에 모든 웹 디자인 프로젝트에 TETO 원칙(Test Early, Test Often)을 적용해야 한다. 너무 늦게, 너무 적게 그리고 틀린 목적으로 테스트하면 안 된다. 틀린 목적으로 테스트하지 않기 위해서는 대부분의 디자인 결정에 타겟이 된 사용자 층을 이해해야 한다. 그러나 고려되는 요구사항이나 이해관계자, 예산 등 아주 구체적인 관점으로 레이아웃을 분석해야 하는 이상 어떤 레이아웃이 나은지 같은 포괄적인 질문에 답할 수 없다.
'공부모' 카테고리의 다른 글
| [레퍼런스] 로켓 위젯 (2) | 2024.10.03 |
|---|---|
| 확신이 들 때가 제일 무섭다 (1) | 2024.09.28 |
| 팀 프로젝트에서 독선적인 락스타와 닌자는 독이 된다 (1) | 2024.09.28 |
| 폐쇄형 SNS, LOCKET 사용성에 대해 (0) | 2024.09.27 |
| 수상할 정도로 정보 수집에 매달리는 사람 (0) | 2024.09.27 |