it-swarm-korea.com

앱 메뉴로 3x3 9 점 아이콘을 사용해야합니까?

웹이 계속 발전하고 더 복잡한 응용 프로그램이 등장함에 따라 사용자가 응용 프로그램간에 빠르게 이동할 수 있도록해야합니다. 이 작업은 작은 화면에서 전역 탐색의 규칙이 된 논란이되는 햄버거 메뉴 아이콘 인 앱 내부에 표시되는 탐색 메뉴와 다릅니다. 여기에서는 응용 프로그램 간 탐색을 살펴 봅니다.

enter image description here

Google은이 기능을 사용하여 사용자가 Google지도, Google Play, Google 드라이브 및 기타 여러 Google 애플리케이션간에 탐색 할 수 있도록합니다.

enter image description here

또한 Microsoft는이 기능을 사용하여 사용자가 OneDrive, Word Online, Sway 및 기타 Microsoft Apps 응용 프로그램간에 탐색 할 수 있도록합니다.

enter image description here

그러나 동일한 메시지를 전달하는 다른 방법이 있습니다. 일부는 4x4 16 도트 아이콘을 사용하고 다른 일부는 3 도트 추가 메뉴의 확장처럼 보이는 4 도트를 사용합니다. 질문은 3x3 9- 도트 앱 메뉴 아이콘이 사용할 아이콘인지 여부입니다.

enter image description here

참고 :이 질문은 햄버거 메뉴에 관한 것이 아닙니다. 앱 메뉴 사용에 관한 것입니다.

42
Benny Skogberg

BURGER VS GRID-동일하거나 다른 컨텍스트?

햄버거와 그리드는 일반적으로 아직 다른 곳에서는 공식화되지 않았지만 (적어도 ISO 또는 W3 표준과 같이 널리 알려져 있지는 않습니다) 다른 의미를 가지고 있다고 생각합니다.

버거 메뉴는 일반적으로 컨텍스트 내에서 콘텐츠를 탐색하는 것에 관한 것입니다. 웹 사이트에 있고 페이지의 다른 하위 섹션으로 이동합니다. 동일한 사이트, 다른 텍스트/이미지 또는 앱에 있고 파일을로드/저장하려고합니다. 그것은 여전히 ​​당신이 작업하는 동일한 앱입니다.

그러나 그리드 메뉴는 컨텍스트 변경에 관한 것입니다. 단순히 콘텐츠를 변경하는 것이 아니라 완전히 새로운 앱, 인터페이스 및 일종의 상호 작용을 여는 것입니다. 제공 한 이미지에서는 동일한 스위트의 다른 앱에 연결되며 Android 메뉴에서 OS에서 앱으로 이동합니다.

목록 대 그리드의 분할은 아직 보편적이지 않은 곳이 아닙니다 ( 예 Android share )). 물론 Android 공유에서 <아이콘은 = 또는 # 중 하나의 행동을 더 잘 나타냅니다. 그러나 아이디어를 얻습니다.


3X3 vs 4X4 아이콘

3x3 및 4x4 아이콘은 사용자가 거의 동일하게 해석하지만 파란색 아이콘은 상당히 다르며 iOS 기반의 '홈 화면'처럼 읽습니다.

3x3 그리드는 4x4보다 몇 가지 이점이 있습니다. 더 간단하고 작게 만들 수 있으며 그래픽/아이콘 크기에 더 적합합니다 (8x8px vs 18x18 이상). 3x3 grid vs 4x4 grid햄버거의 '세 가지 특성'을 유지하므로 모든 세계의 인터페이스와 조금 더 일관성이 있습니다. 기본적으로 3x3을 사용한다고 말합니다.

그러나 메뉴에서 기본 Android 앱 서랍)과 같이 4 개의 항목 열 또는 행 (4x5, 6x4 등)을 사용하는 경우 4x4 그리드를 더 많이 사용해야하는 이유가 있습니다 실제 메뉴와 매우 유사합니다.

그러나 개인적으로, 그것은 내가 갈 수있는 한 (5x5,6x6 등은 아닙니다)

18
PixelSnader

편집하다

사람들은 햄버거 메뉴에 대해 이 기사 를 읽어야합니다. 더 나은 솔루션이 있지만 햄버거 메뉴가 작동합니다. Facebook 및 NBC와 같은 대기업은 사실이며 햄버거 navicon에서 TAB BAR로 변경되었으며 아이콘 + 단어가있는 탭 표시 줄이 최상의 전환율을 제공하는 것으로 보입니다. 복잡한 내비게이션을 중첩 할 수 있습니다.

긴 버전 :

3x3 9- 점 아이콘과 햄버거 아이콘 (navicon)은 동시에 웹에서 가장 논란이 많은 기술이기 때문에 동시에 논의 해 봅시다. 아이콘은 모바일 디자인으로 구현되었으므로 쉽게 확장 가능하여 화면을 크게 절약하고 균일 성을 암시합니다. 그들은 대부분의 웹 사용자들에 의해 인식됩니다. (아이콘은 30 세 이상입니다!). 여태까지는 그런대로 잘됐다.

Burger icon 1981

그러나

  • 사용성 테스트가 확정되지 않음

    디자이너들은 아이콘이 더 젊은 인구 통계에 의해 쉽게 인식된다고 주장하고, 다른 사람들은 나이가 많은 인구 통계가 아이콘을 인식하지만 웹 문해력이있는 경우에만 인식한다고 주장합니다. 병렬 테스트는 종종 상충되는 결과를 반환합니다.

  • 더 많은 클릭. Ew. 사용자가 아이콘을 단일 링크로 인식하지 못하는 것은 허용됩니다. 아마도 링크 그룹처럼 보이도록 설계 되었기 때문일 것입니다. 햄버거 아이콘은 탐색에 추가 작업을 추가합니다. 특정 페이지에 도달하기 위해 한 번의 클릭이 필요하면 이제 두 번이 걸립니다. * 도움말 : 테두리로 아이콘을 둘러싸거나 배경을 지정하면 버튼처럼 보이게 (스크루 모픽) 클릭 수가 증가합니다.

단어 '메뉴'를 포함하는 것이 가장 좋습니다.

Burger menu variation conversion rates

Morten Rand-Hendriksen 우리는 텍스트가있는 햄버거를 바꾸기해야한다고 말합니다. 이렇게하면 더 많은 클릭이 발생하지만 문제는 해결되지 않습니다. 또한 다른 아이콘을 사용하지 마십시오 (예 : Paperclip , ew).

  • 중요한 내용. UX 관점에서 사용자는 수행 할 수있는 조치를 찾기 위해 조치를 취할 필요가 없습니다. 사용자는 자신이 모르는 링크를 찾지 않습니다.

TL; DR.

아니.

" '일반적인'사이트를 원하지만 손녀의 전화기에 압착했습니다."

아이콘은 모바일 우선 접근 방식의 모든 측면을 진심으로 포용하지 않는 우리의 집단적 실패의 증상입니다.

해결책

OP는 '더 큰 플레이어'를 의미하며 Facebook이이 문제를 어떻게 해결했는지 살펴 보겠습니다.

  • Facebook의 앱은 햄버거 아이콘을 tab bar로 바꿨으며 결과적으로 전환율이 향상되었습니다.
  • 메신저 앱. 네. 그래서? 그것에 대한 큰 문제는 이미 메시징 기능을 통합 할 수있는 완벽하고 기능적이고 인기있는 앱을 가지고 있다는 것입니다. Facebook은 하나의 복잡한 앱 대신 두 개의 간단한 앱에 도달 한 각 앱의 역할에 초점을 두어 기능을 compartmentalized합니다.

기능을 분류하면 메뉴 옵션 세트가 줄어들고 탐색 메뉴가 필요하지 않습니다.

따라서 기본적으로 단순화하고 구획화해야합니다.

참고 : 현실은 비즈니스 요구에 따라 최상의 솔루션이 될 것입니다

14
RobSeg

이미지 자체는 메뉴의 형식을 알려줍니다. 이 경우 오늘날 웹 응용 프로그램에서 일반적으로 나타나는 그리드 레이아웃은 three lines의 경우 일반적으로 일종의 목록 스타일이있는 메뉴입니다. 나는 4 점이 확실히 과잉이라고 생각합니다 .3으로 포인트를 얻을 수 있습니다.

내용과는 거의 관련이 없으며 레이아웃과는 더 관련이 있습니다.

4
insidesin

이 특정 아이콘을 "App Drawer Icon"라고 생각합니다. 내가 틀리지 않으면 트렌드는 Android 및 특히 Blackberry, 특히 Nexus 및 Samsung 휴대 전화 (초기))의 앱 실행기 역할을하는 앱 서랍 아이콘 앱.

편집 (내 의견과 다른 제안에 따라) -아이콘 사용의 기본 중 하나는 아이콘에 대한 사용자의 이해가 이전을 기반으로한다는 것입니다 경험. 수년에 걸쳐 앱 서랍 아이콘은 앱 실행기로 더 잘 인식되었습니다. 그러나 여전히 인식 가능성 테스트를 수행합니다. 가능하면 텍스트 레이블을 포함 시키십시오.

3
Adit Gupta

나는 그것을 피할 것이다 ... 현재

때문에...

  • 그리드 아이콘은 햄버거 아이콘과 통신 불가입니다. 그리드가 모호한 아이콘 매트릭스를 나타내는 것처럼 햄버거는 모호하게 메뉴 목록을 전달합니다. 통신 디자인의 관점에서 볼 때, 사용자가 기본 메뉴의 UI 레이아웃을 알고 있고이를 아이콘 디자인과 정확하게 연관시킬 수 있다고 가정하기 때문에 둘 다 문제가됩니다.

  • 이러한 통신 문제로 인해 이제 아이콘의 목적을 전달하기위한 기본 수단으로 협약 및 보편성/유비에 의존하게됩니다. 그러나 아이콘은 오늘날 거의 보편적이지 않으므로 컨벤션은 아직 사용자가 아이콘의 의미를 이해할 수 있도록 신뢰할 수있는 수단이 아닙니다.

그리드 아이콘의 사용이 확대됨에 따라 시간이 지남에 따라 변경 될 수 있지만 시간 만 알 수 있습니다. 현재로서는 그리드 아이콘의 장단점과 잘 알려진 햄버거 아이콘의 장단점 사이에 실질적인 차이가 보이지 않습니다.

2
tohster