2019 년 7 월 9 일 업데이트
웹 사이트 디자인이 얼마나 중요합니까? 사용자가 웹 사이트를 신뢰하지 않는 이유를 설명하도록 요청 받았을 때 댓글의 94%가 사이트 디자인과 직접 관련이 있습니다. 잘 구축 된 웹 사이트는 더 나은 고객 트래픽을 생성하고 개선 된 사용자 인터페이스는 증가 전환에 이르게.
창의성은 중요하지만 웹 사이트를 성장시키는 데 도움이되는 디자인 및 사용자 경험에 대한 몇 가지 기본 규칙이 있습니다. 사이트를 만들거나 재설계할 때는 다음 제안을 염두에 두십시오.
깨끗하고 매력적인 웹 사이트 디자인으로 신뢰를 얻으십시오
디지털 디자인 세계는 단순함을 포용하고 종소리와 휘파람에서 벗어나 기본에 집중했습니다. 사용자 관점에서 볼 때 웹 사이트를 더 쉽게 탐색하여 더 즐거운 경험을 할 수있었습니다. 더 나은 귀하의 청중을 참여 귀하의 웹사이트에 이러한 8 디자인 규칙을 통합.
1 레이아웃을 단순하게 유지합니다.
웹 사이트 레이아웃이 간단할수록 좋습니다. 그것은 지루해야한다는 것을 의미하지는 않지만 필수 요소에 집중해야한다는 것을 의미합니다. 깨끗하고 기능적인 레이아웃을 통해 다양한 플랫폼 및 장치에서 사이트를보다 쉽게로드,탐색 및 사용할 수 있습니다.
해리의 웹 사이트는 가장 중요한 정보—제품—전면 및 중앙에 배치합니다. 그들은 쉽게 콘텐츠에 참여 할 수 있도록 최소한의 텍스트와 영상을 포함한다.
2 탐색을 쉽게 수행 할 수 있습니다.
방문자가 귀하의 사이트에서 시간을 보내고 싶다면 쉽게 돌아 다닐 수 있도록해야합니다. 그것은 당신의 탐색 메뉴 디자인 창조적 인 무언가를 유혹 할 수 있지만,단순하고 직관적 인 정보 아키텍처가 더 중요하다. 너의 위치를 통하여 이동하는 때 외관 도움 너의 독자 느낌 안락하게안에 너의 메뉴 기준을 만들십시요.
보그는 당신이 찾아 당신이 찾고있는 콘텐츠의 유형에 참여하는 데 도움이 설명,눈에 띄는 탐색 메뉴가 있습니다.
3 명확한 조치 호출을 사용합니다.
사이트 방문자가 원하는 것은 무엇입니까? 제품 구매? 이메일 뉴스 레터에 가입 하시겠습니까? 원인에 기부? 행동요청에 관하여 생각하십시요. 그들을 너의 웹사이트를 검사해 방문자에게 밖으로 서는 방법안에 그들을 디자인하십시요. 디자인에 버튼을 사용하는 경우 텍스트가 짧고 직접적인지 확인하십시오.
세계 야생 동물 기금은 탐색 모음과 함께 방문객에게”기부”및”채택”을 촉구하는 밝은 버튼과 함께 콘텐츠 전반에 걸쳐 강력한 행동 촉구를 사용합니다.
4 내용으로,더 적은 것은 더 많은 것입니다.
방문자에 대해 알고있는 것을 사용하여 옵션을 최소화하고 제품에 관심을 집중하십시오. 작업을 수행할 텍스트 및 시각적 요소만 표시합니다.
모바일 앱 웹 사이트—포켓 같은-이 함께 훌륭한 일을 할. 그들은 응용 프로그램을 설명에 초점을 설치하는 행동에 강한 호출을 포함한다. 덜 중요 한 콘텐츠 처럼 그들의 약 섹션 및 그들의 블로그 덜 눈에 띄는 하 고 바닥 글에 연결 되어 있습니다.
5 공백을 두려워하지 마십시오.
공백은 페이지의 빈 공간입니다. 그것은 실제로 흰색 일 필요는 없습니다-그것은 단지 텍스트 나 이미지를 포함하지 않아야합니다. 잘 하는 경우에,그것은 가독성을 개량하고 당신의 웹사이트 디자인에서 불요반사파를 제거할 수 있다. 공백은 또한 직접적인 초점과 관심을 도울 수 있습니다. 방문자가 시끄럽고 혼잡 한 레이아웃을 시각적으로 정렬하지 않고 방문자가 원하는 것을 빠르게 한눈에 볼 수 있도록 기능과 아이디어를 구분할 수있는 방법을 제공합니다.
구글은 공백을 활용하는 궁극적인 예이다. 로고와 검색 상자 단지 빈 페이지—그것은 청소기 수 없습니다.
6 눈길을 끄는 색상으로 웹 사이트 디자인을 향상시킵니다.
전체 웹 사이트 디자인의 기초를 제공 할 색상을 선택한 다음 중요한 버튼 및 기타 인터페이스 요소에 대비되는 악센트 색상을 선택하십시오. 브랜드에 적합한 색상 팔레트를 선택하는 방법에 대해 자세히 알아볼 수 있습니다.
전체 식품 시장은 기본 브랜드 색상에 녹색을 사용하고 보조 오렌지색의 작은 팝은 특색있는 행동 촉구로 눈을 끕니다.
7 매력적이고 읽기 쉬운 글꼴을 통합합니다.
시각적으로 균형 있고 독특한 매력적인 유형을 사용하여 웹 사이트 텍스트를 명확하고 흥미롭게 만듭니다. 네 최고 동향 글꼴은 브랜든 그로테스크,박물관 산세,철도 및 플레이 페어 디스플레이입니다.
벨기에 아동 의류 웹 사이트 스튜디오 아미는 깨끗하고 읽기 쉬운 쇼핑 경험을 위해 브랜든 그로테스크를 사용합니다.
8 비디오 및 풍부한 이미지로 사용자를 참여시킵니다.
동영상과 이미지는 텍스트 혼자보다 더 매력적이다—사실,동영상이 방문 페이지는 80%이상 변환을 높일 수 있습니다. 확장 가능한 이미지를 사용하여 데스크톱 및 모바일 장치 모두에서 고품질 사용자 경험을 보장합니다.
비영리 자선 단체:물 당신이 최대의 영향에 대한 자신의 웹 사이트를 방문 할 때 당신이 볼 수있는 첫 번째 것들 중 하나 만들기,자신의 홈페이지에 비디오를 표시합니다.
사용자 친화적인 웹 사이트에 방문자 참여 유지
세계에서 가장 매력적인 웹 사이트를 가질 수 있지만 사용하기가 어려울 경우 방문자가 고객으로 전환되지 않습니다. 이 일곱 규칙은 청중이 부드러운 사용자 경험을 보장합니다.
1 웹 사이트를 모바일 친화적으로 만듭니다.
웹 트래픽의 최대 70%가 모바일 장치에서 발생한다는 사실을 알고 계셨습니까? 즉,사이트를 처음 방문하는 사람이 스마트 폰을 사용할 가능성이 높습니다. 모바일 경험이 부정적인 경우,당신은 고객을 잃었습니다. 웹 사이트를 모바일 친화적으로 만드는 이유와 방법을 알아보세요.
에버 레인의 모바일 쇼핑 경험은 깨끗하고 사용하기 쉽습니다. 이 반응 및 모바일 장치에서 잘 변환 있도록 디자인은 모듈 형 콘텐츠가 포함되어 있습니다. 웹 사이트는 또한 당신이 웹 사이트에 적은 경험을 받고있는 것처럼 느끼게하지 않고 쇼핑 응용 프로그램을 다운로드 호출을 포함한다.
2 탐색을 간소화하십시오.
누군가가 원하는 것을 찾기 위해 웹 사이트를 탐색해야 할 페이지가 많을수록 고객이 귀하의 사이트를 좌절에서 벗어날 가능성이 높아집니다. 실제로,평균 웹사이트를 위해,방문자의 40%는 단 1 개 페이지를 보기다음에 떠날 것이다!
내용을 묻어서는 안됩니다. 온 것을을 위해 너의 방문자를 주변에 사냥한. 탐색은 사용자 관점에서 잘 조직되고 논리적이어야 합니다. 또한 익숙한 느낌이 있어야하므로 사용자는 가파른 학습 곡선이 없습니다.
(주)틸드 웹 사이트 상단에 간단한 탐색 모음이 있으며 아래에”우리가하는 일”섹션의 간단한 설명과 함께 중요한 점이 링크되어 있습니다. 이것은 당신이 찾고있는 것을 쉽게 찾을 수 있습니다.
3 더 쉽게 찾을 수 있도록 조치 요청을 사용합니다.
방문자가 더 쉽게 찾을 수 있도록 사이트 전체에 버튼을 배치할 수 있는 위치에 대해 생각해 보십시오. 당신이 전자 상거래 사이트 인 경우,”지금 쇼핑”이라고 버튼을 갖는 간단한 탐색 링크보다 훨씬 더 많은 영향을 미칠 것이다;당신이 비영리 경우,탐색 모음과 함께”기부”버튼을 방문자를위한 바람을 기부 할 것입니다.
스퀘어는 비즈니스 소유자가 판매를 시작하도록 장려하는 간단한 행동 촉구를 가지고 있습니다. “광장 계정을 시작 합니다.”그것보다 훨씬 쉽게하지 않습니다.
4 사용자에게 강력한 검색 기능을 제공합니다.
방문자가 사이트를 검색하는 방법과 결과가 표시되는 방법에 대해 생각하는 것도 똑같이 중요합니다. 검색 환경은 검색 환경과 결과 구성 방식을 반영해야 합니다. 자동 완성과 같은 기능을 통합하면 사용자 관점에서도 쉽게 검색 할 수 있습니다.
포스는 매우 정확하고 또한 검색어를 기반으로 왼쪽에 필터를 업데이트 스마트 검색 도구가 있습니다.
5 섹션 헤더로 콘텐츠를 분리합니다.
사이트의 콘텐츠가 많은 영역을 다룰 때는 헤더로 구분하십시오. 이 기사 또는 제품 설명이든,헤더는 콘텐츠 구조를 제공하고 쉽게 스캔 할 수 있도록.
웹엠디는 원하는 정보를 찾을 수 있도록 많은 섹션 헤더를 사용하여 콘텐츠를 소화 가능한 덩어리로 나누는 효과적인 작업을 수행합니다.
6 진짜 사람처럼 말하십시오.
전문 용어 및 마케팅 사용자가 웹 사이트를 방문 할 때 해독해야 할수록 브랜드와 관련 될 가능성이 줄어 듭니다. 친절한,대화 형식 음색은 방문자가 당신의 내용을 읽고 이해하게 쉽게 하고,뿐 아니라 당신의 위치를 항해할 것이다.
짚카는 느긋한 브랜드 목소리로 서비스를 더 쉽게 이해하고 사이트를 더 쉽게 탐색 할 수있게 해줍니다.
7 방문자의 행동을 확인하십시오.
방문자가 귀하로부터 제품을 구매하거나,뉴스레터를 구독하거나,심지어 귀하의 콘텐츠를 공유하는 경우,그들의 행동이 성공적으로 진행되었음을 보여주는 확인 화면을 표시하는 것이 좋습니다. 그 화면을 사용하여 그들에게 감사하는 것은 상처를주지 않습니다.
테스 킴은 소셜 미디어에 공유 할 수있는 프롬프트와 함께 뉴스 레터에 가입 한 후 당신을 축하하고 환영합니다.
출시 전에 웹 사이트 테스트
웹 사이트를 시작하거나 다시 시작할 때 해결해야 할 꼬임이 항상 있습니다. 너의 위치를 시험하,살 전에 의견을 모이는 시간을 걸리는것은 중요하다.
1 품질 보증 테스트를 수행합니다.
리소스가 있는 경우 사이트의 모든 측면을 테스트할 수 있도록 품질 보증 팀을 고용하십시오. 품질보증 역할을 위해 특별히 사람들을 고용할 수 없다면,회사 내부 및 외부의 사람들이 귀하의 웹사이트를 출시하기 전에 테스트하도록 하십시오. 모든 링크를 클릭하고 모든 양식을 작성하고 모든 서비스를 시도 할 수 있습니다. 기본적으로,웹 사이트에 할 일이 있다면,그들은 그것을해야합니다. 당신이 시작하기 전에 그런 식으로,당신은 어떤 버그를 수정할 수 있습니다.
2 라이브 사이트를 푸시하기 전에 사용자 피드백을 수집합니다.
선택한 베타 테스터 그룹을 초대하여 탐색,디자인 및 주요 사용자 흐름과 같은 요소에 대한 피드백을 제공하십시오. 출시 전에 받은 모든 피드백을 기반으로 변경할 수는 없지만 변경 사항에 대한 제안을 염두에 두어야 할 수도 있습니다.
처음부터 웹 사이트를 만드는 것은—당신이 도움을 기관에 입대 한 경우에도-작은 위업 없다. 우리는 매력적인 웹 사이트 디자인 체크리스트를 만드는 편리한 3 단계를 만들었습니다,그래서 당신은 당신이 가서 목록에서 중요한 항목을 모두 확인하고 있는지 확인 할 수 있습니다.