사용자 친화적인 웹사이트 디자인을 만들기 위한 4가지 과제

접근 가능한 웹사이트를 만들려면 모든 사용자가 사이트의 정보, 기능 및 특징에 동등하게 접근할 수 있도록 디자인하고 개발해야 합니다. 그러나 당신의 시간은 제한되어 있습니다. 이 문장을 완성할 때쯤 누군가가 귀하의 웹사이트를 방문하여 버릴 것입니다. 방문자에게 계속 머물러야 할 이유를 주지 않으면 방문자는 사라집니다.

높은 이탈률은 방문자의 관심 부족을 나타냅니다. 특히 보도 자료나 다른 이벤트 기반 콘텐츠인 경우 사용자가 한 페이지를 확인하는 것이 좋습니다. 그러나 목표는 방문자와 관계를 구축하는 것이어야 합니다.

웹사이트 디자인의 성공은 방문자와 얼마나 효과적으로 소통하고 안내하는지에 따라 측정됩니다. 그리고 포스트 광고 시대에 사용자를 유치하는 것이 얼마나 어려운지를 고려할 때 너무 판매 y로 보이지 않고 좋은 웹 사이트 디자인을 통합하는 것이 더 어렵습니다. 여기에서 사용자 친화적인 웹사이트 디자인이 등장합니다.

웹사이트를 테스트 장소로 생각하십시오. 탐색의 모양과 느낌을 즉석에서 수정해야 하며 이를 위해서는 특정 디자인 문제를 해결해야 합니다. 자세히 알아보기 전에 정확히 사용자 친화성이 왜 중요한지 논의하는 것이 중요합니다.

대부분의 웹사이트는 이탈률이 85%입니다. 이는 리드 생성 노력의 상당 부분이 수포로 돌아가고 있음을 의미합니다. 트래픽이 Google 광고에서 발생한 경우 PPC 예산을 낭비하는 것입니다. 이것이 바로 PPC 캠페인을 시작하기 전에 방문 페이지를 신중하게 최적화할 것을 항상 권장하는 이유입니다.

이것은 일반적으로 사용자 친화성과 비즈니스 목표를 신중하게 조정하는 웹사이트 디자인 에이전시의 독점적인 전문 지식입니다. 올바른 작업을 수행하려면 많은 시행착오를 거쳐야 하는 복잡한 작업이지만 수행할 수 있습니다.

다음은 사용자 친화적인 웹사이트를 만들 때 해결해야 하는 4가지 UI 과제입니다.

1. GUI 요소 통합

오늘날 많은 웹사이트에서 사용되는 근본적이고 새로운 버튼, 링크, 버튼 및 스크롤바를 본 적이 있습니까? 그들은 인상적이고 전문적으로 보이지만 그것이 사용자의 삶을 힘들게 하는 것은 아닌지 스스로에게 물어본 적이 있습니까?

이 질문에 대한 대답이 '예'라면 상당한 수의 사용자를 잃은 것입니다.

웹사이트 디자인은 아무리 세련되고 인상적이더라도 사용성을 최우선으로 유지해야 합니다. GUI 요소가 전반적인 사용성을 떨어뜨리면 완전히 제거하는 것이 좋습니다. 웹사이트 디자인에서는 접근성, 사용성, 미학 순으로 우선순위를 두어야 합니다. 버튼과 가로 스크롤은 사용자를 혼란스럽게 하지 않을 것이라고 보장할 수 있는 경우에만 사용해야 합니다.

다음은 웹사이트 디자인에서 기억해야 할 좋은 경험 법칙입니다. 단지 진행을 위해 새로운 디자인 요소를 통합하는 경우에는 이를 피하는 것이 좋습니다.

2. 필요하지 않은 경우 탐색 메뉴를 피하십시오

많은 UI 디자이너는 참신한 디자인 아이디어를 가져 와서 비율에 맞지 않게 날려 버립니다. 이에 대한 좋은 예는 햄버거 메뉴와 무한 스크롤입니다. 두 가지 경향 모두 인기를 얻었고 수천 개의 웹사이트에서 무모하게 포기하고 있습니다. 정보 아키텍처가 이러한 메뉴를 필요로 하는지 여부는 완전히 별개의 문제입니다.

정보 아키텍처에서 요구하는 경우에만 무한 스크롤이 좋아 보입니다. 좋은 예는 Twitter, Facebook, Google 이미지 및 다양한 전자상거래 웹사이트입니다. 이 경우 무한 스크롤이 충분한 솔루션입니다. 그러나 다음과 같이 자문해 보십시오. 사용자가 실제로 좋아하는 콘텐츠를 어떻게 찾고 표시할까요?

그들이 선택한 내용에서 어떻게 앞뒤로 움직일 것입니까? 그들은 당신이 그들에게 던지고 있는 엄청난 양의 정보를 어떻게 탐색할 것입니까?

이것은 또한 햄버거 메뉴를 불러옵니다. 방문자를 위해 공원을 산책할 수 있는 마법의 탐색 메뉴인 것 같습니다. 이름은 디자인에서 따온 것입니다. 즉, 햄버거를 닮은 세 개의 수평선으로 구성되어 있습니다. 그리고 실제 제품과 마찬가지로 햄버거 메뉴는 공간을 절약하도록 설계되었습니다.

하지만 유저들을 철저하게 혼란스럽게 하는 아이콘이다. 우선 사람들이 실제로 햄버거 메뉴를 클릭합니까? 그리고 그렇다고 해도 메뉴 항목이 그렇게 중요하다면 화면에서 더 눈에 띄는 위치를 차지해야 하지 않을까요?

메뉴는 다음 두 가지를 달성할 수 있는 경우에만 중요합니다.

• 그들은 사용자에게 그들이 어디에 있는지 알려줍니다
• 그들은 당신이 갈 수있는 다른 곳을 보여줍니다

햄버거 메뉴는 제대로 하지 않으면 메뉴가 화면에 표시되지 않고 충분히 보이지 않기 때문에 두 가지 모두에서 끔찍할 수 있습니다.

그러나 좋은 소식은 햄버거 메뉴가 앱에서 웹사이트, 비디오 게임에 이르기까지 거의 모든 곳에 존재한다는 것입니다. 그들은 심지어 인쇄할 방법을 찾았습니다. 온라인 사용자의 마음에 새겨 져 있으며 탐색의 동의어가 된 아이콘입니다. 사람들은 그것에 익숙하고 탐색에 의존할 수 있습니다. 사용자가 홈 아이콘이 기본 메뉴로 이동하는 위치 또는 휴지통 아이콘이 파일을 삭제하는 위치라는 것을 사용자가 아는 것과 매우 유사합니다.

웹사이트, 모바일 앱과 같이 시각적 공간을 확보하기 어려운 디지털 공간에서 햄버거 메뉴는 공간을 절약할 수 있습니다. 결국 너무 많은 선택으로 방문자를 압도해서는 안됩니다. 사용자에게 너무 많은 선택이 제시되면 선택을 하지 않는 경향이 있기 때문입니다.

3. 반응형 사이트 만들기

현재 온라인 트래픽의 대부분은 모바일 장치에서 발생합니다. 데스크톱 웹사이트는 물론 필수적이지만 모바일 사용자도 쉽게 로드할 수 있어야 합니다. 마지막으로 원하는 것은 끔찍한 모바일 경험 때문에 청중을 외면하는 것입니다. 요즘에는 모바일 웹사이트 개발이 너무 쉬워서 디자인에 통합하지 않는 것이 변명의 여지가 없습니다.

웹사이트의 반응성을 높이는 데 도움이 되는 WordPress 플러그인과 저렴한 UI 디자이너가 있습니다.

다음은 반응형 사이트의 세 가지 핵심 요소입니다.

Fluid Grid: 고정 비율을 사용하면 화면 해상도와 장치가 다른 사용자가 다른 사람들처럼 동일한 화면을 볼 수 있습니다.

적응형 이미지 및 텍스트: 이미지와 글꼴 크기를 모든 장치에서 동일하게 유지할 수는 없으므로 코드를 조정하여 각기 다른 장치에 완전히 최적화된 로드가 되도록 해야 합니다. 이를 위해서는 CSS 파일과 같은 웹사이트 코드를 신중하게 조정해야 합니다.

미디어 쿼리: 위의 두 시나리오에 대한 코드를 성공적으로 구현했다면 이제 코드를 조합해야 합니다. 미디어 쿼리는 데스크톱 및 모바일 장치에 구체적으로 표시할 내용을 알려줍니다.

4. 빠른 로딩 속도

대부분의 사용자는 주의 집중 시간이 매우 짧고 여러분은 매 순간 경쟁하고 있습니다. 오늘날의 온라인 사용자는 웹페이지가 로드될 때까지 2초 이상 기다릴 인내심이 없습니다.

웹사이트 속도를 높이고 싶으십니까? 호스팅에 더 많은 비용을 들이지 않고도 이를 수행할 수 있는 창의적인 방법이 많이 있습니다.

압축된 웹 사이트: 이미지와 비디오는 군중을 즐겁게 하지만 실제로 너무 많은 미디어는 전반적인 경험을 산만하게 하고 웹 사이트 속도를 저하시킬 수 있습니다. 이미지를 신중하게 사용하는 것 외에도 RIOT, Smush.it 등과 같은 솔루션을 사용하여 웹사이트를 압축하십시오.

이미지 분할: 모든 정보를 한 페이지에 압축하는 것은 좋은 생각이 아닙니다. 더 빠른 로딩을 위해 웹사이트에 여러 개의 짧은 페이지를 제공하는 것이 더 유익할 뿐만 아니라 더 많은 SEO 이점을 제공합니다.

클린 코딩: 검색 엔진은 크롤러를 사용하여 페이지가 무엇인지 이해합니다. 복잡한 코딩과 혼동하면 시간이 걸리거나 웹 사이트를 완전히 무시하게 됩니다. 따라서 항상 클린 코딩을 우선시하십시오.

웹사이트에서 탐색에 어떻게 접근합니까? 아래 의견에 알려주십시오.

저자 약력 -

Faye Eldridge는 Fyami Marketing 그룹 제한의 설립자이자 이사입니다. Fyami는 수요 창출, 리드 육성, 디지털, 소셜 미디어, 일반 마케팅 지원 및 솔루션을 제공하는 런던의 호기심 많은 웹 디자인 및 마케팅 컨설팅 회사입니다.' 우리의 임무는 이 기술 주도의 디지털 시대에 더 많은 비즈니스를 확보하는 것입니다. Faye는 긍정적인 영향, 투명성, 다양성, 호기심, 끈기, 지식 공유를 믿습니다. 그녀는 석사 학위를 가지고 있으며 현재 CMO 및 CTO 협력과 관련된 박사 학위 비즈니스 연구에 참여하고 있습니다.