전문가 수준의 웹사이트 최적화를 위한 7가지 입증된 UX 팁

웹사이트 디자인 내의 사용자 경험 디자인 (UXD 또는 UX)은 웹사이트 내에서 사용자 상호 작용의 사용성, 검색 가능성 및 효율성을 개발하여 사용자의 만족도를 높이는 방법입니다. 오늘은 웹디자이너라면 누구나 자신의 웹사이트 UX를 향상시키기 위해 알고 활용해야 할 축적된 검증된 팁을 나열하겠습니다.

팁 # 1: Flow로 작업하기

사용자가 웹사이트를 쉽게 탐색할 수 있도록 하려면 사용자의 입장이 되어 페르소나 목표를 이해해야 합니다. 웹사이트를 사용할 사람 유형을 나타내기 위해 만든 가상의 인물인 페르소나의 사고 방식에 대해 생각해 보십시오. 웹사이트의 어떤 부분이 가장 먼저 눈에 띌까요?

이에 대한 다소 분명한 대답은 페이지 상단이며 정보를 배치하는 방법은 가장 중요한 페이지를 웹사이트를 방문하는 사람이 가장 먼저 볼 가능성이 높은 상단에 배치하는 것입니다. 원하는 정보를 찾기 위해 스크롤하고 끝없이 파헤쳐야 하는 사람은 아무도 없으므로 맨 위에 배치하는 것이 매우 유용합니다.

웹 사이트의 흐름을 개선하는 데 포함해야 할 또 다른 중요한 요소는 일관성 있고 편리하며 쉽게 이해할 수 있는 사용자 인터페이스를 사용하여 페르소나가 필요한 콘텐츠에 집중하고 방해받지 않고 진행할 수 있도록 하는 것입니다.

혼란을 피하고 사용자에게 불필요한 추가 작업을 생성하지 않도록 하려면 웹사이트에 막다른 페이지를 생성하지 마십시오. 이러한 혼란을 더 피하려면 흔하지 않은 웹사이트 패턴과 인터페이스를 사용하지 마십시오. 사용자에게 새로운 것을 배우게 할 필요가 없으며 일반적인 패턴과 인터페이스를 사용하는 것이 좋습니다.

팁 # 2: 스크롤링

사용자와 관련된 정보가 스크롤 없이 볼 수 있는 부분 아래에 있다는 것이 사용자에게 명확하다면 사용자는 계속 스크롤할 것입니다. 웹사이트에는 스크롤 방향을 시각적으로 명확하게 표시해야 하고 사용자에게 더 많은 자료가 있는지 알려야 한다는 점을 기억하는 것이 중요합니다.

다소 분명하지만 종종 잊혀지는 요점은 웹 페이지가 길수록 사람들이 필요한 것을 찾기 위해 페이지 맨 아래로 스크롤하는 수고를 덜고 싶어한다는 것입니다. 웹 페이지가 너무 길지 않다면 스크롤이 훨씬 빠르기 때문에 웹 페이지를 실행하는 것이 즐겁습니다.

팁 # 3: 대비 및 색상

모든 종류의 사람들이 귀하의 웹사이트를 방문할 것이므로 색맹인 사람들을 고려하십시오. 모든 사용자가 귀중한 정보를 읽을 수 있도록 웹사이트 디자인 이 회색조인지 확인하십시오. 웹사이트의 색상에 대한 또 다른 지침은 링크를 제외하고 텍스트의 다른 부분에 파란색을 사용하지 않는 것입니다. 이는 종종 배경과 심하게 충돌하거나 단순히 사라져 거의 읽을 수 없게 되어 모든 웹 디자이너가 알아야 하기 때문입니다. 모바일 웹사이트의 대비를 인식하지 못하면 화면 반사가 웹사이트 사용성 요소를 망칠 수 있음을 기억하십시오.

CTA가 효율적으로 작동하도록 하려면 한 가지 색상을 사용하고 다른 용도로 사용하지 마십시오. 텍스트가 배경에서 앞으로 나오도록 하려면 따뜻하고 밝은 색상이 눈에 띄기 때문에 사용하는 반면 차갑고 어두운 색상은 배경에 남아 있는 경향이 있습니다.

팁 # 4: 로딩 속도 향상

웹사이트 로딩 속도는 중요한 SEO 요소 중 하나입니다. 전문 SEO 서비스 제공업체로서 우리는 항상 웹사이트 속도 향상에 집중하고 있습니다. 웹사이트가 로드될 때까지 3초 이상 기다리는 것을 즐기는 사용자는 없으므로 3초 이상 지연될 가능성이 없는지 확인하십시오. 웹 사이트가 로드되면 웹 사이트 사용자가 문제 없이 신속하게 목표를 완료할 수 있습니다.

웹사이트의 속도에 대한 인식은 로드 시간, 로드 동작, 대기 시간 및 애니메이션의 부드러움과 같은 요소를 기반으로 합니다. 이러한 요소에 대한 이해도를 높이려면 웹사이트 요소의 골격을 표시하여 여전히 로드되는 동안 레이아웃을 사용자에게 보여줍니다. 사용자가 그림보다 먼저 텍스트를 볼 수 있다면 이미지가 로드되기 전에 사람이 텍스트를 읽을 수 있으므로 텍스트가 먼저 로드되는지 확인하십시오.

관련 게시물: WordPress 웹사이트를 더 빠르게 만드는 5가지 방법

팁 # 5: 모바일 및 태블릿 사용자를 위한 천국 만들기

모바일 인터페이스 요소가 작거나 가까이 배치되면 정확하게 선택하기 어려우므로 모바일에서 터치 대상의 최소 크기는 적절한 패딩을 포함하여 1cm x 1cm이어야 합니다. 사용자가 새끼손가락을 사용하여 액세스해야 하는 경우 웹사이트 또는 앱의 인터페이스 대상이 너무 작다는 것을 알 수 있습니다.

태블릿을 사용하여 사이트를 방문하는 사람은 엄지손가락으로 화면의 측면과 하단에 가장 쉽게 접근할 수 있으므로 웹페이지를 만들 때 이를 염두에 두십시오. 모바일 레이아웃 생성을 시작할 때 사람들이 장치에서 한 손을 사용할지 아니면 두 손을 사용할지 결정해야 합니다.

팁 # 6: 깔끔한 탐색

귀하의 웹사이트에는 일반적으로 찾기 쉬운 탐색 메뉴가 있어야 합니다. 웹사이트 계층 구조가 3-4단계보다 더 크다는 사실을 깨달았다면 웹사이트 디자인을 재고해야 할 때일 것입니다.

웹 사이트에 긴 페이지가 있거나 사용자가 웹 사이트의 특정 부분에 즉시 액세스해야 하는 경우 고정 메뉴를 사용하면 액세스를 더 빠르고 쉽게 만들 수 있습니다. 탐색 레이블은 정확해야 하며 2-3단어 이하로 구성되어야 하며 가장 유익한 단어가 시작 부분에 있어야 합니다.

이동 경로는 사용자에게 웹 페이지의 위치를 ​​알려주는 훌륭한 방법입니다. 탐색 메뉴는 사라져야 하며 웹사이트를 통해 변경되지 않을 뿐만 아니라 도중에 없어야 합니다. 모바일 탐색을 디자인할 때 더 자주 사용하는 옵션이 상단에 있는지 확인하고 덜 인기 있는 옵션을 햄버거 메뉴 아래에 모두 숨깁니다.

이러한 메뉴는 데스크탑에서 덜 일반적이고 눈에 잘 띄지 않을 뿐만 아니라 상호 작용 비용이 증가하고 정보 냄새가 감소합니다. 모바일 웹사이트에서 2차 탐색이 필요한 경우 카테고리 랜딩 페이지, 하위 메뉴 또는 인페이지 메뉴가 모두 적합합니다. 웹 사이트에 메가 메뉴가 있는 경우 클릭 가능한 항목과 클릭할 수 없는 항목을 구분할 수 있도록 링크를 그룹으로 정렬하십시오. 웹사이트 메뉴에서 로그인 및 검색 기능을 숨기면 안 됩니다.

팁 # 7: 양식

사용자에게 빠른 스캔을 제공하려면 양식 레이블과 필드가 단일 수직선에 배치되었는지 확인하십시오. 사용자는 필드 레이블을 추적하지 못해 처리할 필요가 없으므로 텍스트 필드 외부에 배치하십시오. 웹 양식을 이해하기 쉽게 만들어야 하므로 구분 기호로 섹션을 분할하십시오.

양식 오류는 모든 웹 양식 내에서 오류를 일으키는 영역 옆에 배치해야 합니다. 제공된 오류 메시지는 이해하기 쉽고 짧고 사용자에게 도움이 되어야 합니다. 모든 오류 - 발생 필드를 즉시 표시하면 해당 문제 파일 옆에 모바일 사용자가 경고를 놓칠 가능성이 줄어듭니다.

관련 문서: 웹 양식 스팸을 효과적으로 방지하는 방법

이 팁이 웹사이트를 만드는 데 도움이 되기를 바랍니다. 아이디어를 잘 판매하는 멋진 웹사이트를 만드는 것은 항상 어려운 일입니다. 이 팁을 염두에 두십시오. 그러면 웹사이트 사용자가 만족할 것입니다.

저자는 Logo Orbit의 브랜딩 전문가인 Daniel Shane입니다.