이러한 인기 있는 웹 디자인 트렌드를 사용할 때 주의하십시오

대부분의 문화 제품과 마찬가지로 웹 디자인에도 고유한 시대정신이 있습니다. 매년 인기 있는 디자인 구성 요소, 기능 및 트렌드가 새롭게 등장합니다. 태도는 특히 새로운 기술 개발의 빠른 속도로 빠르게 변합니다.

일부 웹 디자인 트렌드는 시간의 시험을 견디지 못합니다. 과거에 사용성을 방해하거나 사이트 방문자를 방해하는 경향을 넣어야 합니다. 디자이너는 참여하려는 바로 그 사람들을 소외시킬 수 있는 다음과 같은 트렌드를 사용하지 않도록 주의해야 합니다.

네거티브 스페이스가 충분하지 않음

네거티브 스페이스는 유용성에서 중요하지만 종종 언급되지 않는 역할을 합니다. 때때로 공백이라고 하는 이미지 또는 디자인 요소 주변과 사이의 공간입니다. 예술과 마찬가지로 웹 디자인에서도 네거티브 스페이스는 예술적 요소로서 그 나름의 힘을 가지고 있다. 불행히도 일부는 부정적인 공간을 낭비되는 공간으로 간주하지만 박물관 벽이 예술 사이에 공간이 필요하듯이 웹 디자인 블록도 마찬가지입니다. 네거티브 공간은 사이트의 콘텐츠를 읽기 쉽고 찾기 쉽게 만듭니다.

웹 디자이너는 "집에서 나가기 전에 거울을 보고 하나의 액세서리를 제거하십시오"라는 코코 샤넬의 조언에 귀를 기울이는 것이 좋습니다. 웹 디자이너는 CSS 및 HTML 요소가 추가 자산을 추가하기 전에 기본적으로 빈 공간이 없도록 설정하는 방법을 고려해야 합니다.

이 문제를 좋은 웹사이트에 필요한 고품질 콘텐츠와 결합하면 문제는 명백합니다. 볼 곳이 너무 많은 웹사이트에 액세스할 수 있습니다. 각 요소 주변에 충분한 공간이 있으면 사용자가 콘텐츠를 보게 되고 CTA가 눈에 띄게 됩니다.

혼잡한 사이트에 대한 몇 가지 쉬운 수정 사항이 있습니다. 먼저 세로 스크롤의 무한 용량을 사용합니다. 상단 탐색이 명확하면 스크롤 없이 볼 수 있는 다른 보조 요소가 있는 것이 완벽하게 허용됩니다. 사이트가 처음 탐색하기 쉬울 때 사용자는 추가 정보를 찾는 데 신경을 쓰지 않을 것입니다. 둘째, 글꼴 크기에 주의해야 합니다. 너무 크면 공간을 차지하고 상사의 이메일이 대문자로 된 것처럼 공격적으로 읽을 수 있습니다. 균형이 중요합니다. 압도적이지 않으면서도 시선을 사로잡는 글꼴을 찾으세요.

햄버거 메뉴

지난 몇 년 동안 가장 두드러진 웹 디자인 트렌드 중 하나는 햄버거 메뉴였습니다. 이러한 추세는 부분적으로 모바일 장치에서 웹사이트에 액세스하는 사용자의 급격한 증가로 인해 발생했습니다. 햄버거 메뉴의 요점은 메뉴 탐색을 숨겨 페이지의 주요 공간을 어지럽히지 않도록 하는 것입니다. 사용자는 아이콘을 인식하고 일반적으로 전체 메뉴를 찾는 데 문제가 없습니다. 좋은 생각입니다. 사람들이 그곳에 도착하기 전에 원하는 것이 무엇인지 알고 있다면 말입니다.

사이트가 콘텐츠를 유기적으로 발견하는 사용자에 의존할 때 문제가 발생합니다. 루크 로블스키(Luke Wrobleski)가 말했듯이 "분명한 것이 항상 이깁니다." 그리고 명백합니다. 가시성이 높다는 것은 사용량이 많다는 것을 의미합니다. 페이스북의 예를 생각해 보자. 소셜 미디어 아울렛이 iOS 앱의 상단 햄버거 메뉴에서 하단 탭 표시줄로 이동했을 때 사용자 만족도, 더 높은 수익, 속도(및 인식) 증가와 마찬가지로 사용자 참여가 최고였습니다.

사용자가 자연스럽게 발견할 다른 콘텐츠의 양을 제한하는 것은 위험한 게임입니다. 카테고리를 숨김으로써 방문자는 옵션에 즉시 노출되지 않습니다.

햄버거 메뉴는 기업이 상품에 대한 사용자 노출에 의존하는 전자 상거래 사이트에 특히 피해를 줍니다. 사용자가 메뉴를 열어야 할 때 비즈니스의 가장 분명하고 중요한 측면을 놓칠 수 있습니다. 그리고 RSS 피드를 보는 독자에 비즈니스가 의존한다면 햄버거 메뉴는 완전히 피해야 합니다. 독자가 관련 주제 및 기타 최신 헤드라인을 볼 수 있어야 하는 뉴스 사이트에 부정적인 영향을 미칩니다.

전면 페이지 캐러셀

전면 페이지 캐러셀은 현재 유비쿼터스이며 소규모 비즈니스 페이지에서 대기업에 이르기까지 사이트에서 볼 수 있습니다. 디자이너는 하나의 기능을 통해 많은 정보를 전달하는 시각적 경제를 창출하기 때문에 캐러셀에 끌릴 수 있습니다.

회사가 여전히 이름을 알리려고 하는 경우 캐러셀을 주의해서 사용하세요. 캐러셀은 사람들이 귀하의 페이지를 찾는 것을 더 어렵게 만들고 일반적으로 페이지 본문에 더 적은 콘텐츠를 의미하기 때문에 검색 엔진 최적화(SEO)에 부정적인 영향을 미칠 수 있습니다. 페이지의 텍스트가 적으면 Google이 찾을 수 있는 메타 정보가 줄어듭니다.

그러나 페이지 자체에 텍스트를 추가하도록 지정하는 것과 같은 해결 방법이 있지만 이는 시각적 경제를 위해 회전 목마를 사용하는 점을 훼손합니다. 캐러셀은 사이트에서 주요 접근성 문제를 일으킬 수도 있습니다. 로드 시간을 느리게 하는 것으로 악명이 높으며 성능 문제를 일으킬 수 있는 JavaScript를 자주 사용합니다.

캐러셀은 사이트의 접근성을 떨어뜨릴 뿐만 아니라 사이트에 액세스할 수 있는 방문자의 참여를 유도하지도 못합니다. 2013년 연구에 따르면 캐러셀이 자동으로 전달되었는지 아니면 수동으로 전달되었는지에 따라 사이트 방문자의 약 1%가 캐러셀을 클릭한 것으로 나타났습니다.

Wroblewski가 햄버거 메뉴에 대해 제공하는 조언을 고려하면 문제는 회전 목마에서도 동일합니다. 즉, 명확하지 않습니다. 위의 연구에서 클릭한 1%의 83%가 첫 번째 이미지를 클릭했습니다. 사용자를 사로잡고자 하는 다른 4개의 이미지가 의미하는 바는 무엇입니까? 그들은 마일리지를 얻지 못하고 참여를 촉진하기 위해 거의 노력하지 않습니다.

Wroblewski는 실제로 작동하는 예로 Amazon에서 PJ McCormick의 회전 목마 디자인을 사용합니다. 이미지는 세그먼트로 나뉘며 사용자가 특정 섹션 위로 마우스를 가져가면 캐러셀의 이미지가 되어 사용자가 찾고 있는 것을 찾기 위해 그곳을 클릭할 수 있음을 분명히 합니다.

팝 업

드롭다운 메뉴는 가장 숙련된 사용자라도 조작하기 복잡할 수 있으며, 작은 화면에 복잡성을 추가하면 탐색에 악몽이 될 수 있습니다. 반면에 팝업 메뉴 컨트롤은 사용자의 예민함이나 속도에 관계없이 쉽게 스크롤할 수 있는 메뉴 옵션 목록을 제공합니다. Apple의 iPhone은 드래그, 플릭 또는 넛지와 같은 좋은 예입니다. 큰 대상과 관대한 옵션을 사용하면 쉽게 제어할 수 있습니다.

잘 수행되면 팝업은 복합 입력(날짜, 키, 무게 입력)에 적합하며 프로세스를 훨씬 더 간소화합니다.

예를 들어 날짜를 입력하는 세 가지 옵션(일, 월, 연도) 대신 단일 날짜 필드에서 사용자가 한 번에 세 개의 목록을 스크롤하여 올바른 날짜를 입력할 수 있는 팝업 메뉴 세트를 열 수 있습니다. 그 간단한 수정은 사용자의 조바심과 함께 입력 시간을 줄일 수 있습니다.

무한 스크롤과 바닥글 콘텐츠 결합

무한 스크롤은 유용한 디자인 도구가 될 수 있습니다. 콘텐츠를 끝없이 쉽게 로드하면 만족스러운 사용자 경험을 얻을 수 있습니다. Pinterest와 같은 사이트는 탁월한 효과를 위해 무한 스크롤을 사용하며 부분적으로 최신 유행을 유지합니다. 특정 앱에서는 수직 스크롤이 큰 성공을 거두었지만 수평 스크롤은 여전히 ​​많은 사용자를 혼란스럽게 합니다. 그들은 종종 그것이 옵션이라는 사실조차 깨닫지 못합니다. 내용이 끝나는 것처럼 보이면 마찬가지로 곤혹스러울 것입니다.

사이트에 사용자가 액세스하려는 콘텐츠가 있는 바닥글도 있는 경우 무한 스크롤이 문제가 됩니다. 사용자는 아래로 스크롤하여 바닥글을 따라잡을 수 없습니다. 정통한 모바일 사용자는 이것을 알아낼 것이지만, 그것이 그들을 좌절시킨다면 시도하지 않을 수도 있습니다. 명확함과 함께 탐색이 쉬워야 합니다.

느린 로딩 화면

산사태로 인해 사용자가 사이트를 포기하는 가장 큰 이유는 로드 시간이 느리기 때문입니다. 설문 조사에서 사용자의 약 절반이 페이지가 로드될 때까지 10초 이상 기다리지 않을 것이라고 말합니다. 더 빠른 인터넷 연결과 장치에 익숙해지면서 사람들은 페이지가 거의 즉시 로드되기를 기대합니다. 화면 로드 시간이 길수록 사용자가 떠날 가능성이 높아집니다.

사용자는 이에 대한 책임을 져야 합니다. 기술은 우리의 경험을 간소화하여 기대가 되었습니다. 로드 시간을 방해할 수 있는 복잡한 콘텐츠의 균형을 맞출 때 아무도 보지 않아도 상관 없는지 고려하십시오. 모바일 사용자는 웹사이트를 확인하는 동안 라떼를 마시며 앉아 있는 것이 아니라 이동 중이며 모바일 경험이 빠르게 변하기를 기대합니다.

불필요하게 복잡한 타이포그래피

오늘날 다양한 서체를 사용할 수 있으므로 웹 디자이너는 한 페이지에 여러 글꼴을 사용하고 싶은 유혹을 받을 수 있습니다. 자주 인용되는 타이포그래피 가이드라인에는 한 문서에 2~3개 이상의 글꼴을 사용해서는 안 된다는 내용이 있습니다.

여러 글꼴을 정당화하는 상황이 있을 수 있지만 일반적으로 깨끗하고 명확한 정보 전달에 중점을 두는 것이 좋습니다. Wroblewski는 Tim Brown의 타이포그래피 모범 사례에 대한 메모를 제공합니다. 타이포그래피의 가장 중요한 요소 중 하나는 균형입니다. 크기, 선두 및 측정의 균형은 가독성과 미적 매력을 향상시킵니다. 글꼴이 읽히지 않는다면 무슨 의미가 있겠습니까? 디자인의 명확성을 모호하게 하는 것은 직관적이지 않으며 독자층을 늘리지 않습니다.

하나 또는 두 개의 글꼴을 선택하면 통일된 모양이 만들어지고 사용자가 브랜드를 더 잘 식별할 수 있습니다. 목표는 사용자의 참여를 유도하는 것입니다. 너무 많은 크기의 여러 글꼴은 사이트를 편안하게 읽기 어렵게 만듭니다. 텍스트를 읽을 수 없으면 어느 누구도 페이지에 오랫동안 머물지 않습니다.

플로팅 요소

플로팅 요소는 사용자의 관심을 끄는 좋은 방법이 될 수 있지만 시간이 부적절할 경우 페이지의 일부를 차단하고 사용자가 보고 싶은 것에서 주의를 산만하게 하여 사용자를 소외시킬 수 있습니다. 그것은 그들이 사이트에 참여하지 않도록 보장합니다. 플로팅 요소는 작은 화면에서 사이트에 액세스하려는 모바일 사용자에게 특히 실망스럽습니다.

또한 플로팅 요소는 닫혀도 열리고 중요한 페이지 기능 위에 플로팅되어 의도한 대로 작동하지 않는 경우가 많습니다. 사용자 경험이 복잡할수록 사이트를 계속 사용할 가능성이 줄어듭니다.

시차 스크롤링

시차 스크롤이 반드시 나쁜 디자인 선택은 아니며 많은 마케팅 캠페인에서 큰 효과를 거두는 데 사용되었습니다. 사이트가 차별화할 수 있는 새로운 옵션을 제공하며 최근 인기를 얻었습니다.

몇 가지 단점이 있습니다. 캐러셀과 마찬가지로 검색 엔진이 크롤링할 콘텐츠가 적기 때문에 SEO에 부정적인 영향을 미칠 수 있습니다. 또한 시차 스크롤은 모바일 장치에서 액세스할 수 있어야 하는 사이트에 대한 좋은 디자인 선택이 아닙니다. JavaScript와 많은 그래픽에 의존하기 때문에 페이지가 매우 느리게 로드되어 사용자가 참을성이 없어 페이지가 로드되기 전에 떠날 가능성이 높아집니다.

트렌드를 최대한 활용

이러한 모든 경향에 적합한 응용 프로그램이 분명히 있지만 웹 디자이너는 사용을 결정하기 전에 신중하게 생각해야 합니다. 모든 디자이너에게 가장 좋은 규칙은 유행하는 유행보다 기능과 사용자 경험에 더 많은 비중을 두는 것입니다. 어떤 디자인이든지 Luke Wroblewski의 조언을 염두에 두십시오. 아무리 좋은 콘텐츠라도 숨겨져 있으면 소용이 없습니다.