웹디자인 성공 비결! 반드시 지켜야 할 황금 원칙 공개

대부분의 사람들이 게으른 건 나쁜 식이 아니라 그냥 이게 내 두뇌 능력을 낭비하는 방식이라는 거죠.

 주의 지속 시간이 그 어느 때보다 짧아졌기 때문에 사용자는  가장 중요한 작업이 무엇인지, 이 아이콘이 무엇을 하는지, 더 많은 정보를 어디에서 찾을 수 있는지 즉시 파악할 수 있어야 합니다.

 사람들이 사이트에 접속하면 기대를 합니다.

 링크를 보고 버튼이 버튼처럼 보이기를 기대하고 텍스트가 읽기 쉽고 아이콘이 의미가 있기를 기대합니다.

 그 기대를 깨는 순간 생각하게 되고, 그것이 적입니다.

 Google은 아마도 가장 순수한 예일 겁니다.

 생각하게 하지 마세요.

 다른 옵션도 보이지 않습니다.

 보이는 건  텍스트, 음성 또는 이미지로 검색할 수 있는 옵션이 있는 검색 창 하나, 버튼 두 개뿐입니다.

 검색하고 운이 좋다고 느끼고 그게 다입니다.

 지루하기는 하지만 지루하지 않습니다.

 천재적입니다.

 모든 사람이  슈퍼맨 의상을 검색하는 아이든, 여자들에게 좋은 인상을 주는 방법을 찾는 십 대이든, 페이스북 사용법을 입력하는 조부모이든 무엇을 해야 할지 정확히 알고 있기 때문입니다.

  설명이 필요 없고, 학습 곡선도 없고, 불필요한 노력도 없습니다.

 하지만 Google Maps에서 특이한 사건이 있었습니다.

 어쩌면 제가 그럴지도 모릅니다.

 운전하기엔 너무 멍청하지만 이런 일이 일어났습니다.

 새로운 경로로 운전하고 있었고 Google 지도의 지시를 따라가고 있었습니다.

 앱은 직진하라고 하지만 도로는 앞쪽에서 두 갈래로 나뉩니다.

 높은 곳에서 직진하는 고가도로와 평평한 도로가 있습니다.

 지상에서 고가도로 옆을 직진합니다.

 고가도로를 타고 출구를 놓칠지 평평한 도로를 타고 다른 경로로 갈지 확신할 수 없습니다.

 반 마일 떨어진 곳에 출구가 있습니다.

 찾을 수 있을 거라고 생각했는데 네, 네, 찾을 겁니다.

 여기 명백하고 간단한 해결책이 있습니다.

 앱은 갈라지는 지점을 인식하고 명확한 지침을 제공합니다.

  직진하는 대신 고가도로를 타거나 출구를 타세요라고 합니다.

 지도는   다른 도로의 올바른 경로와 등급 윤곽선을 나타내는 굵은 선으로 갈라지는 지점을 명확하게 확대합니다.

 단순함은 사물을 단순화하는 것이 아니라  사용자가 멈추고 생각할 필요가 없을 정도로 모든 것을 명확하게 만드는 것입니다.

 모든 클릭, 스크롤, 모든 필드는 쉽게 느껴져야 합니다.

 사용자가 잠시 멈춰서 메뉴가 어디 있는지 물어야 한다면 이것은 버튼인가요 아니면 텍스트인가요? 이것을 클릭하면 어떻게 되나요? 디자인은 이미 패턴을 잃어버린 것입니다.

 우리의 뇌는 패턴을 좋아합니다.

 탐색 상단이나 측면 버튼은 텍스트가 있는 직사각형 버튼처럼 보입니다.

 돋보기는  검색을 의미하고 장바구니 아이콘은 결제를 의미합니다.

 이러한 패턴은 이유가 있어 존재합니다.

 규칙을 고수하면 효과가 있습니다.

 사용자는 편안함을 느끼고 무엇을 기대해야 할지 알기 때문에 생각할 필요가 없습니다.

 새로운 소프트웨어를 설치할 때 모든 주요 작업이 같은 위치에 나타나거나 모든 페이지에서 같은 위치에 서명하도록 요구하는 크고 긴 계약서를 보게 되면   표준 디자인을 고수하면 작업이 지루해질까 봐 걱정할 수 있지만 저를 믿으십시오.

 지루하지 않습니다.

 좋은 디자인입니다.

 목표는 바퀴를 새로 발명하는 것이 아니라 더 잘 굴러가도록 하는 것입니다.

 혼란은  전환율을 죽입니다.

 영웅 섹션을 디자인하든 가입 양식이든 전체 앱이든 항상 스스로에게 질문하십시오.

 이것이 즉시 명확한가요? 처음 사용하는 사용자가 다음에 무엇을 해야 할지 이해할 수 있을까요?  의심의 여지가 있다면 단순화하십시오.

 여기에 함정이 있습니다.

 간단한 디자인은 만들기가 더 어렵습니다.

 많은 사람들이 간단함이 쉽거나 게으르다고 생각합니다.

 아, 회색 배경과 5분 정도 걸리는 큰 버튼을 추가했을 뿐입니다.

  사실 단순함은 노력이 필요하고 훨씬 더 어렵습니다.

 소프트웨어 예시에서 버튼 배치를  살펴보는 것과 같이 많은 추가 기능을 추가하는 것보다 깔끔하고 명확한 것을 만드는 것이 더 중요합니다.

  사용자에게는 간단 하지만 개발자는 모든 화면 크기의  모든 페이지에서 버튼이 같은 위치에 있는지 확인하기 위해 몇 가지 추가 단계를 거쳤습니다.

 단순함은 규율, 세부 사항에 대한 주의 , 사용자에 대한 깊은 이해가 필요합니다.

 무엇을 추가하는 것이 아니라 무엇을 빼느냐가 중요합니다.

사용자에게 필요한 모든 것을 제공하면서 무엇을 제거해야 하는지 파악하는 것은 엄청나게 어렵습니다.

  끊임없이 생각하고 테스트하고 반복해야 합니다.

단순한 디자인은 쉬워 보일 수 있지만 그 뒤에는  정밀함과 목적을 가지고 내린 수많은 결정의 결과입니다.

그렇기 때문에 단순함은 단순한 디자인이 아닙니다.

선택은 기술이며 마스터하기 가장 어려운 것 중 하나입니다.

  중요한 구별 단순함은  쓸모없을 정도로 최소한이라는 것을 의미하지 않습니다.

디자인이 단순하거나 최소한이지만 필수 요소가 부족하면 나쁜 디자인입니다.

많은 경우 사용자가 정보에 입각한 결정을 내릴 수 있도록 많은 요소를 함께 포장해야  하지만 실제로 세 개의 서로 다른 버튼이 필요합니까?아니면 하나의 명확한 버튼이 더 효과적일 수 있습니까? 애니메이션은 가치를 더하거나 방해가 될 뿐인가요? 불필요한 것을 제거하면 디자인이 더 명확하고 사용하기 쉬워집니다.

 또한 텍스트를 쉽게 읽을 수 있도록 하세요.

 주요 정보에는 제목과 요점을 사용하세요.

 시선을 유도하는 시각적 계층 구조를 만드세요.

 사람들은 전체 UI를 분석하고 완벽한 옵션을 클릭하지 않을 것입니다.

 그들은 빠르게 페이지를 스캔하고 첫 번째 합리적이거나 명확한 옵션을 클릭할 것이고, 솔루션이 효과가 없으면 돌아가서 다시 시도할 것입니다.

 여러분의 역할은 완벽한 옵션, 가장 명확한 솔루션을 만들어서 사람들이 자주 돌아가지 않도록 하는 것입니다.

 온라인 신발 매장을 만든다고 가정해 보겠습니다.

 남성용 튼튼한 하이킹화, 여성용 귀엽고 멋진 신발,  스포츠화에서 캐주얼화, 정장화까지 모든 종류의 신발이 있습니다.

 모든 제품이 있다는 것은 많은 제품을 제공하지만 모든 제품을 보여줄 수 있는 공간이 제한적이라는 것을 의미합니다.

 즉, 사용자는 원하는 옵션에 도달하기 위해 여러 번 클릭해야 합니다.

 신규 사용자가 구매를 완료하려면 클릭이 명확하고 수월해야 합니다.

 여기서 사용자 흐름 다이어그램이 등장합니다.

 사용자가 목표를 완료할 수 있는 가장 짧고 간단한 경로를 안내합니다.

  가상의 사용자를 만들어서 그 경로를 매핑해 보겠습니다.

 24세의 데이비드는 다가올 구직 면접을 위해 검은색 옥스포드 구두를 찾고 있었습니다.

 그래서 그는 저희 웹사이트에 접속했고 세 가지 옵션을 본 다음 네 가지 옵션을 더 보고 다섯 가지 옵션을 더 보고  카탈로그에 따라 여섯 가지 또는 여섯 가지 이상의 옵션을 보게 되었습니다.

 대부분의 생각은 여기서 이루어지겠지만 저희는 데이비드에게 놀라운 사용자 경험을 제공하고자 했기 때문에 정렬 옵션과 몇 가지 필터 도 추가했습니다.

 생각하고 필터링한 후 데이비드는 원하는 구두를 구매했습니다.

 웹사이트는 그에게 로그인을 강요하지 않았고, 그는 배송지 주소를 입력하고 원하는 대로 결제할 수 있었습니다.

 몇 번의 클릭이 필요했지만 저희는 그에게 생각을 강요하지 않았습니다.

 하지만 일부 사용자는 그렇게 깊이 파고드는 것을 좋아하지 않으므로 클릭을 없애고 그들이 찾고 있는 것으로 바로 이동할 수 있는 검색 창이 필요했습니다.

  이제 간단한 사용자 흐름이 생겼으니 디자인할 시간입니다.

  왼쪽 상단에 메인 헤더 로고를 배치하고, 그 다음 주요 링크와 검색 창을 배치하고, 마지막으로 기존 고객이 여기에 도달할 수 있도록 로그인 버튼을 배치합니다.

 데이비드는 저희 사용자 흐름에 따라 남성을 클릭합니다.

 드롭다운 메뉴와 같은 네 가지 주요 카테고리를 보여줄 수 있지만 저희의 임무는 여기까지 도달하는 과정을 만드는 것입니다.

 훨씬 쉬워지도록 이 추가적인 복잡성을 제거하고 이런 방식으로 더 간단한 솔루션을 제공하겠습니다.

David 는 앞서 논의한 대로 간단하고 명확한 두 번의 클릭만으로 신발 카탈로그에 도달할 수 있습니다.

 여기에서 대부분의 생각이 발생하므로 사용자에게 정보를 폭격할 수 없습니다.

깔끔하고 명확한 타이포그래피가 있는 크고 아름다운 제품 이미지만 있으면 됩니다.

David는  모든 제품, 등급, 브랜드 및 스타일, 마지막으로 가장 중요한 세부 정보 가격을 볼 수 있지만 여기에는 많은 옵션이 있으므로 많은 생각이 필요합니다.

 필터 및 정렬 옵션을 추가하여 David를 도우겠습니다.

  페이지가 이제 꽤 스캔하기 쉬운 것 같습니다.

웹사이트에서 많은 생각이나 앞뒤로 이동하지 않고도 완벽한 옵션을 쉽게 찾을 수 있습니다.

  알겠습니다.

거의 다 왔어요.

  이 여정을 완료하려면 몇 번 더 클릭하고 조금 생각해야 하지만 먼저 이 웹사이트의 가장 중요한 페이지를 디자인해야 합니다.

  여기서 볼 수 있듯이 David는 이미지, 리뷰, 색상 변형, 사이즈 선택기, 배송 시간 및 제품 세부 정보를 보고 싶어할 것입니다.

따라서 이 모든 것을 매우 쉽게 찾고 이해할 수 있도록 합시다.

우선 몇 장의 사진 회전형 형식으로 불필요한 스크롤을 피하고  다음으로 가장 중요한 정보인 제품 이름과 가격을 더 잘 스타일링하여 계층 구조를 추가하고 클릭 가능함을 알려주는 밑줄과 함께 평가를 추가한 다음 색상 변형과 크기 선택기를 사용하여 완벽하게 일치하는 항목을 찾습니다.

David 의 우편번호를 자동으로 가져와서  클릭 가능한 텍스트에 밑줄을 그었다는 배송 알림을 그에게 알릴 수 있습니다.

중요한 것은 이런 작은 세부 사항입니다.

 세부 사항에 대해 이야기하면서 여기에 제품 세부 정보를 추가하고 싶지 않습니다.

배송 세부 정보와 지금 구매는 함께 있어야 하며 제품 세부 정보는 여기에 맞지 않으므로 타협하여 대신 버튼을 추가해 보겠습니다.

하지만 이 버튼은 주의를 끌기 위해 경쟁하고 있으므로 색상을 사용하여 계층 구조를 추가해 보겠습니다.

이제  디자인을 너무 복잡하게 만들거나 주요 작업을 방해하지 않고 제품 세부 정보를 추가할 수 있습니다.

 이것이 최소한의 디자인으로 간주되지 않을 것이라고 생각합니다.

 우리는 정보에 입각한 결정을 내리는 데 필요한 모든 필수 요소를 보여주지만  동시에 스캔 가능 하고 생각할 필요가 없습니다.

매우 중요한 질문입니다.

 상사나 고객을 설득하여 이러한 결정에 대해 어떻게 해야 합니까?또는 때때로 나쁜 디자이너, 무능한 개발자 또는 프로젝트 관리자가 너무 어리석거나 융통성이 없어서 참여하지 못하는 경우 해결책이 있습니다.

 그들에게 사용성 테스트를 시청하게 하세요.

 사용성 테스트란 기본적으로 대상 사용자에게 앱을 처음으로 사용하게 한 다음 특정 작업을 수행하도록 요청한 다음   경쟁사 앱에서도 동일한 작업을 수행하도록 요청합니다.

 다른 앱에서 더 나은 성과를 보인다면 왜 그들이 귀하의 앱을 사용해야 할까요? 그리고 귀하의 앱을 사용하지 않으면 돈을 벌 수 없습니다.

 상사도 그것을 이해할 것입니다.

 지금 그들이 아무리 융통성이 없어도 디자인한 프로토타입을 꺼내서 동일한 사용자로 테스트해 보세요.

 새 디자인이 경쟁사보다 더 나은 성과를 보인다면 구현될 것입니다.

 모든 것은 돈의 흐름에 따릅니다.