디자인 해독 : 8 가지 UI 요소 제거
디자인이 낡아 보이기 시작합니까? 오래되고 오래된 사용자 인터페이스 요소는 사이트를 실제보다 훨씬 오래되게 만들 수 있습니다.
여기서는 설계 계획에서 제거해야 할 8 가지 UI 요소를 살펴 봅니다. 그러나 이것이 전부는 아닙니다. 각“하지 말 것”에는 웹 사이트 현대화를위한 제안이 포함되어 있습니다. 우리는 그 디자인을 즉시 최신 상태로 만들 것입니다!
1. "평면"버튼
일반적으로 평면 디자인의 가장 큰 문제 중 하나는 모든 것이 평평하다는 것입니다. 일부 사용자의 경우 요소를 구별하기 어렵고 상호 작용이 어려워졌습니다. "거의 평평한"및 "평평한 2.0"이이 문제에 대한 솔루션으로 등장하여 사용자가 UI 요소를 더 잘 찾고 상호 작용할 수 있도록 도와줍니다.
대신 이것을 시도하십시오 : 애니메이션 힌트 또는 호버 효과를 추가하여 플랫 스타일 버튼에 조금 더 강조하십시오. 평평한 모양이 마음에 들면 사용자가 쉽게 찾고 상호 작용할 수있는 거의 평평한 대안 또는 대형 버튼 옵션을 고려하십시오.
2. 텍스트 슬라이드 쇼
회전 목마와 슬라이더는 디자이너들 사이에서 큰 논쟁의 대상이 될 수 있습니다. 그것들이 사용 가능하고 잘 작동하는지는 종종 내부의 내용에 크게 의존합니다.
긴 정보 문자열을 표시하는 텍스트 캐 러셀 또는 슬라이더는 그리 실용적이지 않습니다. 실제로 자체적으로 슬라이드하지 않고 클릭이 필요한 슬라이더는 특히 유용하지 않습니다. 이러한 옵션 중 어느 것도 사용자가 클릭하도록 권장하지 않습니다.
대신 여러 항목을 표시하려는 경우이 기술을 소수의 시각 자료에 대한 디스플레이로 사용하지만 액션 호출로 사용하지 말고 사용자가 순서대로 읽어야하는 텍스트 블록에는 사용하지 마십시오 . 직접적이고 이해하기 쉬운 동작으로 화면의 다른 위치에 동작 요소를 배치하십시오.
3. 소규모 행사 링크
추가 정보를보기 위해 웹 사이트 내에서 클릭하거나 탭해야하는 것은 과거의 일입니다. 사용자는 초기 브라우저 위치를 잃지 않고 한 눈에 정보를 볼 수 있기를 원합니다. (이것은 웹 사이트와 앱에 해당됩니다.)
사용자가 이러한 원본에 대한 원본 소스를 벗어나지 않는 방식으로 정보를 표시 할 수 있으면 그렇게해야합니다.
대신 시도해보십시오. 팝 오버는 특정 내용의 비트와 관련된 작은 UI 요소입니다. 사용자가 작업을 활성화하면 거의 알림 스타일 요소가 나타나고 사라집니다. 팝 오버는 Apple OS X에서 선전 된 기능 중 하나이며 정당한 이유가 있습니다. 탐색없이 제공 기능.
4. 플래시 기반
플래시에 대해 할 말은 한 가지뿐입니다. 웹 사이트에서 플래시를 계속 사용하고 있다면 중지하십시오.
HTML5는 더 이상 새로운 것이 아니며 오디오, 비디오 및 기타 멀티미디어를 재생하는 데 필요한 모든 기능을 제공합니다. (또한 모든 장치에서 작동합니다.)
5. 긴 그림자가있는 아이콘
플랫 디자인 트렌드의 이러한 아웃풋은 상당히 짧았습니다. 여전히 몇 개의 긴 그림자 아이콘이나 버튼을 찾을 수 있지만 스타일에는 이미 오래된 느낌이 있습니다.
대신 이것을 시도하십시오 : 그림자 또는 질감의 힌트가있는 플랫 스타일을 사용하여 버튼을 만드십시오. 이러한 미묘한 효과는 요소가 상호 작용하도록 설계된 것보다 쉽게 볼 수 있으며 다른 시각적 요소를 방해하지 않는 단순한 미학을 유지합니다.
6. 메가 메뉴
메가 메뉴는 사용자가 많은 콘텐츠가 포함 된 웹 사이트를 탐색하는 데 도움이되지만 작은 장치에서는 실용적이지 않습니다. 이러한 대형 메뉴의 문제점은 사용자가 다음에 무엇을 해야할지 모르고 너무 압도되어 사이트를 버리는 내용이 너무 많다는 것입니다.
거대한 메뉴의 또 다른 문제는 많은 메뉴가 호버에서 열리고 화면의 많은 부분을 차지하도록 설계되어 있다는 것입니다. 이로 인해 사용자가 혼란을 겪고 사용자가 사이트를 방문하거나 메뉴로 이동 한 이유를 더 혼란스럽게 만들 수 있습니다.
대신 시도해보십시오. 강력한 사이트 내 연결을 사용하여 관련 콘텐츠를 통해 사용자를 안내하십시오. 사용자가 디자인의 패턴을 쉽게 찾아서 한 요소 또는 약간의 내용에서 다음 요소로 이동할 수 있습니다.
사이트 분석을 사용하면 페이지마다 사용자 흐름과 패턴을 찾아 강력한 페이지 관계를 만들 수 있습니다. 내비게이션으로 커질 필요가 있다고 생각되면 의도적으로 클릭하여 쉽게 숨길 수있는 전체 화면 슬라이드 아웃 메뉴를 고려하십시오.
7. 너무 많은 소셜 미디어 아이콘
이 시점에서 사용자는 페이지 전체에 수십 개의 아이콘이없는 경우에도 소셜 미디어에서 컨텐츠를 공유하는 방법을 알고 있습니다. 해당 아이콘이 모두 콘텐츠에서 산만해질 수 있습니다.
더 나쁜 것은 다양한 채널의 다양한 색상과 모양을 가진 강력한 소셜 미디어 아이콘입니다. 이 아이콘들은 당신의 디자인을 죽이고 있습니다. 더 나은 옵션이 있습니다.
대신 다음을 시도 하십시오. 사용자 정의 소셜 미디어 공유 버튼을 머리글 또는 바닥 글에 추가하고 개별 컨텐츠로부터 멀리하십시오. 웹 사이트를 방문한 디자인과 실제 이유에서 사용자를 방해하지 않도록 미묘하게 디자인하십시오.
아니면 좀 더 대담하고 도랑을 완전히 고려하십시오. 귀하의 분석을 파헤 치십시오. 실제로 얼마나 많은 사람들이 공유 버튼을 사용하고 있습니까?
8.“가짜”애니메이션
버튼, 요소 및 기타 클릭 유도 문안을 회전, 점프 또는 변경하여 사용자가 볼 수있게합니까? 이러한 기술은 사이트를 즉시 데이트합니다.
디자인은 사용자에게 그려 져야합니다. 말도 안되는 움직임 때문에주의를 기울여서는 안됩니다.
대신 이것을 시도하십시오 : 의도를 가진 요소를 디자인 하십시오 . 사용자에게 디자인에 집중할 수있는 곳을 제공하십시오. 각 화면에는 소셜 미디어 공유 옵션을 제외하고 하나 이상의 실행 가능한 항목이 포함되어야합니다. 따라서 사용자가해야 할 일을 분명히하고 해당 목표를 달성하는 데 도움이되는 요소를 디자인하십시오.
여기서 카드 스타일 요소는 좋은 옵션입니다. 컨테이너는 표준 버튼보다 크기 때문에 클릭 가능한 공간과 정보를 충분히 제공합니다. 이를 통해 사용자는 적절한 조치를 쉽게 찾아 클릭 할 수 있습니다. (그리고 카드도 반응이 좋습니다.)
결론
귀하의 웹 사이트에서 이러한 UI 실수를 저지르고 있습니까? 간단한 수정은 디자인을 새로 고치고 현대화하는 데 도움이되지만 사용하기가 더 쉽습니다.
다른 유형의 사용자 인터페이스 요소를 잘 사용할 수있는 방법을 보려면 예제를보고 링크를 클릭하여 작동 방식을 확인하십시오. 그리고 Design Shack 갤러리에서 작업 내용을 공유하십시오.