it-swarm-korea.com

이 디자인이 왜 복잡하거나 압도적 인 것으로 간주됩니까?

데스크톱 및 태블릿 브라우저 용 웹 앱을 개발 중입니다. 모든 UX 지식은 개인적인 경험과 반복에서 비롯됩니다. 저는 공식적으로 훈련 된 적이 없습니다. 나는이 웹 사이트에 정보를 가능한 한 체계적으로 정리하기 위해 많은주의를 기울 였지만 나에게 피드백을 준 많은 사람들은 그 정보를 "혼잡하고"압도적이라고 묘사했다. 개선하면서 동일한 정보를 제시 할 수있는 방법을 찾기 위해 고심하고 있습니다.

my website

이 카드 기반의 듀얼 메뉴, 사이드 바 디자인의 어떤 요소가이 반응을 유발합니까?

167
Jack Guy

UX가 어려워지는 곳

인터페이스에는 본질적으로 아무런 문제가 없습니다. 많은 양의 정보를 합리적으로 명확하고 표준화 된 방식으로 처리하는 것으로 보입니다.
그러나 인터페이스에 문제가 있습니다 : 사용자는 편안하지 않습니다.

이는 해결하기 어려운 문제이지만 모든 UX 디자인 프로젝트의 핵심입니다. 그것은 당신이 봉사하는 청중과 그들이 당신의 앱을 사용하게 될 상황에 전적으로 달려 있습니다.

어디서 시작하나요

  1. 소규모 사용자 집단의 의견을 과대 평가하지 않도록하십시오. 그것은 "시끄러운 바퀴"문제입니다. 유효한 문제가있을 수 있지만 더 많은 사용자를 대표해야합니다.
  2. 실제 사용자가 앱으로 실제 작업을 수행 할 수 있습니다. 어떤 일이 일어나고, 어떤 작업을 완료하려고하는지, 어디에서 갇히고 혼란스럽고 좌절되는지 확인하십시오.
  3. 한 번에 하나의 솔루션을 테스트하십시오. 변경 사항이 합리적 일수록 테스트에서 더 정확하게 제거 할 수 있습니다.
  4. 무언가를 고쳤다 고 생각되면 사용자와 다시 연락하십시오. 많은 피드백을 수집하고 생각했던 것을 해결했는지 확인하십시오.

tl; dr

  1. 정확하게 사용자가 달성하고자하는 것을 이해하십시오.
  2. 모든 것을 제거
    [액션, 단어, 사진, 아이콘, 색상, 모양, 픽셀]
    그러면 # 1에서 더 나아지지는 않습니다.

일반적인 관찰

면책 조항 : 나는 귀하의 사용자가 아니며 결코 없을 수 있습니다. 그들이 맞지 않은 추측에 대한 나의 관찰을 가져 가라

계층

작은 코너 삼각형 덕분에 카드 헤드 라인이 내 눈을 먼저 끌었습니다. 중요한 요소 인 것 같습니다. 그럼 다음에 어디로 가야합니까?

Create Game 버튼을 찾으면 중요하게 들립니다. 위치는 화면 가장자리에 숨겨져 있기 때문에 너무 많은 작업처럼 보이며 이미 다른 곳에서 사용되는 유일한 강조 색상을 사용합니다.

내비게이션처럼 보이는 GamesUsers 항목은 어떻습니까? 현재 어느 쪽이 활성인지 또는 무엇을할지 확실하지 않습니다.

일반적으로 말하면 내 관심을 많이 요구합니다. 그로 인해 ...

시각적 소음

거기에있는 것들을 수정하여 이산적인 것들의 수를 줄이십시오. 예를 들어, Online 표시기가 원을 잃고 다음과 같이 단순화 될 수 있습니까?
Online indicator in text only.

또 다른 기회는 카드 정보에 있습니다. 개요 수준에서이 정보가 얼마나 필요합니까? 호버/탭에서 일부를 확장 할 수 있습니까? 또한 세부 정보 아이콘은 유용한 정보를 추가하지 않지만 빈도로 인해 페이지에 많은 시각적 노이즈를 추가합니다. 왜 텍스트 레이블이 아닌가?
Details table without icons.

또한 게임 카드에는 노랑-오렌지색 라인에 대한 컨텍스트가 없습니다. 언뜻 보면 사람 아이콘 아래에 탭 표시기처럼 보이고 Private에 대한 다른 탭이있을 수 있습니다. 내가 생각하자마자, 나는 그것이 이해가되지 않는다는 것을 깨닫는다. 더 많은 관심을 낭비했습니다.

단음

복잡성 문제에도 불구하고, 단조 로움을 해소 할 무언가를 추가 할 여지가있을 수 있습니다. 게임 표지 이미지를 허용한다는 의미가 있습니까? 아니면 파란색 L 코너를 전체 헤더 색상으로 사용할 수도 있습니다 (실제로 같지 않다고 가정)?

165
plainclothes

모든 게임 박스에 대해 테이블 ​​행 레이블을 반복하면 인식 된 혼란 IMO에 많은 기여를합니다. 또한 모든 정보가 필요합니까? 아마도 단순화를 시도 할 수도 있지만 필요한 경우 확장하는 기능을 추가하십시오.

enter image description here

72
Paul LeBeau

UI는 훌륭하지만 개선 할 수있는 몇 가지 사항이 있습니다.

  • 너무 많은 줄 (내가 믿는 대부분을 제거 할 수 있음)
  • 디자인의 다른 부분 사이의 대비가 너무 적습니다 (눈을 흐리게하고 디자인의 다른 부분을 여전히 식별 할 수 있는지 확인하십시오). 카드는 특히 문제가 있습니다. 그들을 팝 시키십시오.

나는 약간의 선을 제거하고 카드를 조금 더 두드러지게 만들었고, 이것이 당신의 디자인을 조금 덜 어지럽게 만든다고 생각합니다. 자신을 판단하십시오.

enter image description here

33
filip

카드가 표시하는 데이터는 목록이나 테이블에서 훨씬 더 의미가 있습니다. 각 카드에는 값이 다른 동일한 정확한 필드가 있으며 매번 필드의 레이블을 표시합니다. 헤더가있는 테이블에는 "시간", "언어"등 레이블이 한 번만 표시됩니다.

카드에 대한 메모로서, 혼합 또는 자유 형식의 콘텐츠에 더 적합한 것으로 보입니다. 각 카드는 고유 한 콘텐츠에 맞는 고유 한 UI를 제공합니다. 귀하의 콘텐츠는 사용 가능한 게임 목록이므로 UI로 목록을 나타내는 것이 좋습니다.

17
Harrison Paine

개인적으로, 나는 그것이 혼란스럽지 않다고 생각하지만, 그래도 약간 압도적입니다.

기본적으로, 나는 당신의 화면을보고 어디에서 무엇을해야할지 전혀 모른다. 가장 중요한 측면은 모퉁이에서 L이고 누군가가 온라인 상태라는 사실 (색상 사용 때문) 인 경우 모든 것을 동일한 수준의 계층 구조로 제공하는 정보를 혼합합니다. CTA s는 회색으로 표시됩니다 (!!!!), 빵 부스러기는 주어진 화면을 기준으로 이상합니다 (게임을 표시하고 있지만 빵 부스러기 표시 사용자 그리고 이것은 Games 아래의 레벨입니다. Players) 뜻이 아니라면, 메시지/채팅 사이드 바가 있습니다. 어떻게 든 주요 콘텐츠와 관련이있는 것처럼 보이지만 실제로 연결을 찾기가 어렵습니다 ... 음, 약간 혼란 스럽습니다. 좋은 소식은 이러한 모든 측면을 쉽게 변경할 수 있다는 것입니다. 주된 문제는 계층 구조, 중요한 것 및 중요하지 않은 것에 초점을 맞추는 것 같습니다. 몇 가지 색상 (주로 CTA)을 변경하고 테스트하십시오. 나는 당신이 즉시 결과를 볼 것이라고 확신합니다

어쨌든, 나는 당신이 몇 가지 광범위한 테스트를 수행하고, 행동과 상호 작용을 연구하고, 동료가 아닌 친구가 아닌 실제 사용자에게 질문해야한다고 생각합니다.

11
Devin

여기에 제공된 답변은 훌륭하지만 몇 가지 관찰 사항입니다.

  1. 모든 게임 카드에 의미있는 정보를 넣는 것과 같은 방식으로 사용자 아바타를 회색 원 안에 넣습니다 (여러 회색 원이 복잡해 보입니다).

  2. 온라인 사용자에 대한 개념으로 녹색 원만 유지하고, 친구 목록에서 텍스트 (예 : '온라인')를 제거하지만 로그인 한 사용자 상태에 텍스트를 유지하면 녹색 = 온라인과 같은 다양한 색상의 원의 의미를 이해하는 데 도움이됩니다. , 빨간색 = 오프라인, 주황색 = 유휴 등.

  3. '친구 | 이미 앱 헤더에있는 모든 헤더입니다. 이 3 점에 대해서는 다음 이미지를 참조하십시오.

  4. 탐색 메뉴에 게임 및 사용자 메뉴를 다음과 같이 배치하십시오.

  5. 오른쪽 상단 모서리와 글자의 크기를 늘리십시오.

8
IT ppl

모든 UX에 적용 할 기본적인 지침이 있으며 여기에서 특히 중요합니다.

편의성은 명확성과 경쟁 할 필요가 없습니다.

디자이너는 화면 공간을 최대한 활용하면서 사용자를 혼동하거나 압도하지 않는 정보를 제시해야합니다. 그러나 이것은 필요하지 않음 디자이너들이 제시하는 명확성을 위해 이용 가능한 정보량을 거래해야한다는 것을 의미합니다. 사용자 상호 작용으로 동적 디자인을 활용하십시오.

유동적 인 디자인 매체에 익숙해지면서 ...

우리 디자이너들은 일반적으로 벡터 레이아웃 편집기에서 인터페이스를 디자인하는 것이 당연하다는 것을 알고 있습니다. 여기서 벡터 애니메이션은 많은 애니메이션, 전환 및 변형을 배선하지 않습니다. 이것은 사용자 상호 작용을 통해 정보를 노출 (및 숨기기)하는 혁신적인 레이아웃을 설계 할 수있는 능력에서 많은 사람들을 제한합니다. 따라서 먼저 움직이는 애니메이션 인터페이스를 구축 할 수있는 환경에서 디자인하는 법을 배웁니다. 나는 개인적으로 HTML, JS 및 CSS로 인터페이스를 디자인합니다. 잠시 후 자연스러운 디자인 매체가됩니다.

... 우리는 사용자의주의를 끌면서 정보를 노출하고 숨기는 환경을 만들 수 있습니다.

그런 다음, 원하는 순서 또는 필요한 순서대로 요소에서 요소로 사용자의 초점을 "풀링"하는 정보의 힌트를 표시하고 인터페이스와 상호 작용할 수있는 인터페이스를 설계 할 때 자유롭게 유동성을 활용하십시오. 다른 정보 그룹에 액세스합니다.

동적 사용자 상호 작용에 중점을 두어 간단한 인터페이스 계층을 사용하여 필요한 정보를 원하는 시점으로 사용자에게 안내 할 수 있습니다.

많은 정보를 사용자에게 노출하고 싶지만 사람들이 한 번에 편안하게 느끼는 양에는 제한이 있습니다. 특히이 경우와 같은 중복 정보 테이블을 처리 할 때 부드럽고 간단한 애니메이션에 연결된 사용자 상호 작용에 의존하여 노출되는 세부 정보의 수를 제한하십시오.

예를 들어, 중복 정보가있는 게임 블록을 모두 표시하는 대신 게임을 식별하는 레이블 만있는 블록을 표시 한 다음 사용자가 게임과 상호 작용할 때 (예 : 탭 또는 호버링) 세부 정보를 표시하십시오. 게임의. 이러한 변화만으로도 인터페이스를 대폭 단순화하고 노출 된 정보를 한 번에 너무 많이 흡수하도록 압력을 덜받습니다.

7
Viziionary

글쎄, 좋은 답변이지만 "Monotony"이외의 원인으로 당신을 도울 수는 없습니다.

잡지, 포스터 및 사용자 인터페이스의 훌륭한 디자인은 font, font sizewhitespace의 곱입니다. color, harmed with line.

이러한 속성 : 글꼴, 글꼴 크기, 공백 및 색상 train 이해해야하는 사용자 (a) 중요한 사항, (b) 정보를 검색하는 방법 및 (c) 패턴을 보는 방법 데이터를 직접 생각하기보다는 한 눈에 볼 수 있습니다.

독서는 사람들에게 매우 많은 비용이 들기 때문에 "이것들 중 어떤 것이 다른 것 같지 않은지"또는 그 원리의 변형이 무엇인지 찾고자하는 스캐닝입니다.

공간적 위치는 사용자가 잠재 의식적으로 사용자 인터페이스를 외우면 전문 지식을 바탕으로 개발됩니다. (Excel 스타일의 인터페이스와 같은 경험이없는 사용자와 새로운 사용자의 인터페이스는 없습니다.)

다시 말해, 엔트리 레벨 또는 숙련 된 사용자를위한 디자인을 '테스트'하고 있는지 여부를 알지 못하면 인터페이스를 디자인 할 때 introspection에 의존 할 수 없습니다.

글꼴 크기 (우선 순위), 글꼴 스타일 (글꼴이 상대적 의미를 전달 함)을 사용하여 정보를 보는 방법을 사용자에게 '훈련'합니다. 글꼴 뒤에 shapes (다른 사람이 조언 한 모서리 탭)을 사용하십시오. 모양 후에 color를 사용하십시오. 마지막 색상이어야합니다.

색상은 type을 나타내거나 '이것은 다른 것과 같다'를 나타내야합니다. 색상 (색상 막대 또는 배경)으로 '장식'해야하는 경우 이는 '의미'가 없으므로 일반적으로 실패를 나타냅니다.

'레이어'에서 별도의 요소를 수행하여 디자인을 테스트 한 다음 레이어를 켜거나 끕니다. 당신의 눈은 당신에게 말해야합니다.

카드 인터페이스

이제 '카드'(공간 레이아웃)를 결합했지만 '테이블'글꼴과 색상을 사용합니다.

카드가 솔루션에 적합한 UI 모델 인 것처럼 보이지 않으므로 먼저 사용자를 돕고 있는지 확인하십시오. 카드는 주로 이미지가 들어있는 경우 작동하며 지속적으로 재 배열해야합니다. 그렇지 않으면 테이블이 스캔하기 쉽기 때문에 일반적으로 더 좋습니다.

예를 들어, 카드 놀이 팩을 가지고 바닥에 던지면 방향에 상관없이 카드를 구분할 수 있습니다. 바닥에 '카드'를 던지면 모두 같은 모양이됩니다.

따라서 사용자가 위치 인덱싱에 의존하는 경우 잘못된 모델을 사용하거나 카드 놀이 방법을 해결해야합니다.

유용한 힌트

사람들에게 잡지 페이지 레이아웃을 찾도록 권유합니다. 물론 금본위 제는 NYT 종이와 웹 사이트입니다. 모든 유형과 공백.

그러나 비주얼 모델 (예를 들어 독점 보드 게임)로 시작하면 일반적으로 디자이너가 아마추어를 괴롭히는 '상자 문제'를 피할 수 있습니다.

6
Curt Doolittle

인간이 UI와 같이 다소 구조화 된 것을 볼 때 mental model을 만드는 경향이 있습니다.
이 목표를 달성하기 위해 무의식적으로 UI를 즉각적으로 스캔하고 해당 UI의 각 항목을 기록합니다.
이 프로세스에서 우리는 UI의 요소 수에 따라 달라지는 "mental power"를 소비합니다. 이것은 인지 부하와 관련이 있습니다.
이를 여러 번 수행 한 후 소비되는인지 부하에 따라 "피곤함"이 발생합니다.

UI에는 많은 항목이 있으며 사용자가 불평하는 것은 각 스캔마다 필요한인지 부하의 양입니다.
요소 수는 "Hey guys"패널이 아니라 아이콘, 텍스트 조각, 선, 모든 것의 수입니다!
개선 할 헤드 룸이 많기 때문에 좋은 소식입니다.

내 제안을 이해하기 위해 몇 가지 예를 열거하겠습니다.

  • 각 "Hey guys ..."에는 다수의 내부 라인이 있는데, 제거하면 사용자의 이해를 방해하지 않으면 서인지 부하를 가볍게합니다.
  • "Created by Jack"아래의 줄
  • "DETAILS"아래 테이블의 셀 경계
  • "세부 사항"단어 자체
  • "Friends | All | ✉5"아티팩트 라인 (마우스 오버시 버튼처럼 표시)
  • friends | All artifact 아래의 얼룩말 줄무늬
  • "온라인"은 색상 부분 만 가능하지만 대신 녹색 ✓ 대신 빨간색 십자가가있을 수 있습니다.
  • 정렬/필터/모든 게임에서 드롭 다운 화살표를 텍스트에 더 가깝게 설정하여 단일 항목으로 만듭니다.
  • 둥근 그림 대신 세 개의 테두리 모두에 도달하는 사각형을 사용하십시오.
  • 등 ...

첫 번째 테스트로서 "DETAILS"테이블을 확장하여 네 개의 경계 (Nice 둥근 모서리와 "DETAILS"제목이 없음)를 모두 터치하면 알 수 있습니다.
더 간단 해져서 이해하기 쉽습니다.
그러면 시각적 요소 삭제 열풍을 믿거 나 시작할 수 있습니다.

5
Juan Lanus

아이디어 :

게임 만들기

어쩌면 첫 번째 카드가 큰 게임 만들기 버튼 일 수 있습니다! 편집하려는 텍스트를 클릭하여 바로 입력 할 수있는 입력 유형을 갖고 싶습니다. 반응이 좋을 것 같습니다. 어쩌면 그것을 볼 때 매우 간단합니다. "+"와 "Create Game"이 있고 클릭하면 자동 입력 필드에서 부드럽게 애니메이션됩니다. (카드가 3D로 뒤집히는 것을 말하십시오. 여기에는 창의성을위한 끝없는 옵션이 있습니다!)

게임 카드

반응성에 대한 비슷한 아이디어 : 게임 참여 버튼을 제거하고 해당 버튼을 반투명 오버레이 효과 중 하나로 가리 킵니다. 나는 스크린 샷/게임 아트의 아이디어를 배경 화면으로 좋아합니다.

이 카드에 대해 방금 실현 한 내용은 다음과 같습니다. 실제로 이러한 종류의 데이터에 가장 적합한 방법은 아닙니다. 모든 카드에는 동일한 세부 정보와 정보가 표시됩니다. 왜 어떤 종류의 테이블이 아닌가? 그런 다음 플레이어는 필드별로 정렬 할 수 있습니다.

창의력을 발휘하고 왼쪽이나 오른쪽에 필드 레이블을 붙인 다음 여전히 벽지와 같은 넓은 카드와 같은 방향을 가질 수 있습니다. 끝없는 아이디어도 여기에! 어쩌면 왼쪽에서 오른쪽으로 스크롤 할 수 있고 위 아래로 스크롤하면 게임 유형에 따라 분류에 따라 카드 그룹을 이동할 수 있습니다. (화살표 키가 이제 참여할 수 있습니다!)

플레이어 목록

이것은 (그리고 아마도 헤더) 약간 혼란스러워 보이는 부분입니다. 나는 그것이 주변 장치에 많은 시각적 정보라고 생각합니다. 어떻게이 문제를 해결할 수 있을까요? 다시 한 번, 많은 옵션이 있습니다. 우리는 창의력을 발휘해야합니다! 다시, 바탕 화면부터 시작하겠습니다. 그리고 아마도 아코디언 인터페이스일까요? "온라인 o"대신 채워진 원 대 반원 또는 빈 원을 가질 수 있습니다. 또는 리본과 같은 다른 주제 표시기! (또는 속이 빈 아이콘이있는 반투명 그라디언트를 사용하십시오.)

한 가지 아이디어는 온라인 사람들 만 포함하는 것입니다. 오프라인은 아래에서 쉼표로 구분 된 링크로 표시됩니다.

Qwerty Uiop , Plok Min Juhby , Wes X Qwaz , Kip HG Jolumny , Ferd 3rd , Chasbyn Q Jon Klimp-Werdguft ZCXV , Guy T. Fred , Ty Hug

(BTW, 어머니와 나는 키보드 지역에서 우리가 할 수있는 것을보기 위해 게임을 할 때이 이름을 생각해 냈습니다.)


이러한 제안은 시작하는 것입니다. 그것이 도움이되기를 바랍니다!

4
HTDE
  • 예를 들어 더 어두운 배경색을 추가하여 중요한 콘텐츠를 더욱 두드러지게하려면 더 대비 를 더 추가하십시오 (카드 게임).

  • 현재 방에있는 플레이어의 비율로 크기를 늘려 노란색 획을 더 의미있게 만드십시오. 예를 들어, 방 전체에 빨간 선이 생깁니다.

  • 파란색 "L"의 글꼴은 다른 글꼴 인 것 같아서 정말 이상합니다.

  • Arguably : "Round", "Time", "Language"및 "Words"앞의 아이콘을 제거하십시오. 그들은 재미 있지만 산만하고 텍스트 자체로 충분하기 때문에 어떤 논리도 추가하지 않는 것 같습니다.


첫 번째 두 상자 만 100 % 변경했습니다 (두 번째 상자에는 여전히 오래된 L이 있지만 표시로 나타납니다).

New design

3
Daan

Apple의 Jonathan Ive에 따르면 좋은 인터페이스는 사용자와 즉시 관련이있는 정보 만 제공합니다 . 확인 https://www.youtube.com/watch?v=3q6ULOT9Q4M

이것은 약간의 사소한 점 일 수 있습니다. 동일한 문제가있었습니다. 내 클라이언트의 문제는 인터페이스에 너무 많은 WHITE SPACE가 있습니다. 귀하와 같은 CARD 기반 레이아웃의 경우 다음을 시도하십시오.

  1. 기본 컨텐츠 섹션에 #EEE와 같은 배경색 추가

  2. 사이드 바 채팅의 경우 추가 라인을 회색으로 제거하십시오.

  3. 비교할 때 숫자 데이터를 표시해야하는 경우 차트/그래프를 사용해보십시오.

2
William

페이지의 계층 구조 부족 및 요소 정의가 주요 문제입니다. 하이라이트 색상, 스케일 및 사용자가 제시 한 정보를 해석하고 요약하는 방법을 이해하면 도움이됩니다.

2
David Sheridan