it-swarm-korea.com

이 회전 큐브 인터페이스는 사용자 친화적입니까?

저는 폼의 다른 부분이 큐브의 다른 측면에 표시되는 혁신적인 폼 인터페이스의 프로토 타입을 만들고 있습니다. 큐브가 회전하고 사용자가 큐브가 회전함에 따라 큐브를 채울 수 있습니다. 여기서 작업 예 :

enter image description here

나에게 그것은 우리의 문제에 대한 매우 강력한 해결책 인 것처럼 보입니다 (즉, 이전에는 양식이 페이지에서 너무 많은 공간을 차지하고 매우 지루했습니다). 내가 모르는 문제를 경험하십시오.

이 모델은 사용하기 쉬운 모델처럼 보입니까? 그렇지 않은 경우 개선하기 위해 어떻게해야합니까?

349
Peter Olson

나는 이것이 실제 예제라고 말했듯이 주로 더미 데이터 (아래 참조)로 양식을 채 웠습니다. 이 전체 디자인에 대한 나의 진정한 관심사는 큐브의 해당면이 실제로 보이지 않는 한 입력 필드가 입력을 받아들이지 않는다는 것입니다. 나는 대부분의 사용자가 볼 수없는 입력 필드에 입력하는 것이 성가신 것이라고 생각하고 그 얼굴이 다시 돌아 오면 그 필드가 입력 한 모든 물건을 잃어 버렸다는 것을 알게됩니다.

Luke Wroblewski 사이트에 가입 양식과 관련하여 유용한 정보가 있으며 레이아웃을 미세 조정하기 위해 살펴볼 가치가 있습니다. 주소 세부 정보가 모두 한 줄로 표시되는 것을 발견했으며 더 복잡한 주소를위한 다른 옵션 필드를 사용하여 거리와 우편 번호 또는 우편 번호로 분할하는 것이 좋습니다. 국제 주소를 양식으로 처리하려면이 XMatters의 기사 를 확인하십시오.

처음 가입 할 때 사회 보장 번호를 받아야하는지 여부를 고려하겠습니다. 꼭 필요한 경우 일부 사용자가 그런 종류의 세부 사항에 대해 약간 재미있을 수 있기 때문에 왜 필요한지에 대한 인라인 도움말을 제공하는 것이 좋습니다. 가능하면 점진적 참여 를 통해 정보를 얻는 것을 고려하십시오.

나는 약간 역겨워서 덜 생생한 녹색을 선택하고 빨간색 텍스트를 다른 색상으로 변경했을 것입니다. Colorblind Web Page Filter 를 사용하여 맹인 사용자에게 색상이 어떻게 보이는지 확인할 수 있습니다. 더 많은 색상을 사용하는 것을 두려워하지 마십시오. 스매싱 매거진은 컬러 이론에 관한 3 편 기사 를 가지고 있습니다.

나는 전체 개념이 그것을 위해 많은 것을 가지고 있다고 생각하고 주요 UX 문제가 해결되면 꽤 매끄럽게 보일 것입니다. 나는 사용자가 참신함을 좋아할 것이라고 생각합니다. 요즘 가입 양식이 너무 지루합니다. 가입 양식은 반드시 죽어야한다 (Luke Wroblewski가 다시 한 번)가 언급 된 이유에 대한이 기사를 제외하면 이 예제는 가입 한 관에서 마지막 손톱을 부딪 칠 수 있다고 생각합니다. 행운을 빕니다.

enter image description here

290
Roger Attrill

심각한 답변 : 끔찍하다

그것을 개선하기 위해 회전 큐브가 아닌 것으로 만들 수 있습니다.

주된 문제는 내가 통제 할 수 없다는 것입니다. 좋은 사용자 인터페이스를 통해 사용자는 "이봐, 대단해! 내가 할 수있는 일을 봐라!"

이것은 "거룩한 쓰레기, 나는 빨라. 나는 심지어 양식을 작성할 수 없다"고 생각하게한다. 3D 정신 모델을 유지하고 물건을 거꾸로 채우고 텍스트를 비스듬히 표시해야합니다. 수갑을 켠 상태에서 기타를 연주하는 것과 같습니다.

페이지의 공간이 문제가 될 경우 아코디언 양식을 사용하십시오. 그러면 사용자는 전체 양식을보고 진행 상황을 쉽게 측정 할 수 있으며 현재 필요한 항목 만 표시 할 수 있습니다.

바보 같은 대답 : 대단하다!

2D 족쇄에서 양식을 해제하는 것을 보게되어 기쁩니다. 이것은 N면 3D 도형을 구성하는 라이브러리로 추상화 할 수 있습니까? 여기서 N은 필요한 양식 섹션의 수입니까? 수학이 너무 어려운 경우 양식을 다시 정렬 할 수 있습니다 렌더링하기 쉬운 모양-11 개 대신 12 개 섹션으로 나눕니다.

또한 더 깜박이는 조명을 봅시다.

215
Nathan Long

아니. 어떤 식 으로든 삼각형이나 기하학적 모양으로 만들더라도 대답은 여전히 ​​NO입니다.

나는 당신의 작업 예를 방문했습니다 (추측은 베타 또는 무언가입니다). 운없이 양식 필드를 채우려 고했습니다. 나는 운이없이 다시 쓰여진 것을 읽으려고 노력했다. 그런 다음 탭을 닫았습니다.

나는 당신의 질문을 다시 읽고, 큐브를 다시 방문하고 1 초 후에 "당신은 나를 놀려 야한다"고 말하면서 종료했습니다.

글쎄, 내 대답과 내 눈에 이것은 좋은 UX가 아닙니다. 좋은 것이 아닙니다. 웹이 점점 쉬워지고 있습니다. 왜 어려운 일을 원하십니까?!

귀하의 질문에 대한 나의 대답은 아니오입니다. 확실 해요.

56
EnexoOnoma

좋아, 나는 그것을 골라내는 것을 의미한다고 생각하지만 are 이것에 대해 정말로 나를 괴롭히는 것들이 있습니다.

  1. 어떤 글꼴을 사용하고 있는지 잘 모르겠지만 커닝은 정말 이상하게 보입니다.
  2. 32px는 데이터 입력 컨트롤의 표준 너비입니다 (50 또는 다른 것을 사용하고 있다고 생각합니다)
  3. 일반적으로 주에 대한 드롭 다운 목록은 북동부에서 시작하여 우편 번호별로 정렬됩니다.
  4. 제출 버튼은 오른쪽 정렬 된 IMO 여야합니다.
  5. 이모티콘을 이모티콘의 실제 이미지로 바꿔야합니다 (텍스트 기반 텍스트는 텍스트 데이터 교환 (이메일)을 위해 예약되어 있습니다).

하지만 그 외에는 정말 정말 좋아 보입니다.

47
Daniel
  1. 큐브를 어떻게 구성하고 있는지 모르겠지만 회전 중에 큐브가 왜곡되는 것처럼 보입니다.

  2. 자동 회전 큐브는 모든 사용자에게 어리 석고 성가시다-예를 들어 스 와이프와 함께 큐브를 회전시킬 수 있으면 꽤 재미있을 수 있습니다.

  3. 텍스트를 뒤집어서는 안됩니다. 이제까지.

  4. 귀여움 이외의 다른 방식으로 3 차원을 사용하지 않았습니다. 예를 들어 양식의 다음/이전 페이지를 표시하는 작업 인 왼쪽 또는 오른쪽으로 회전 할 수 있습니다. 양식의 현재 페이지에 대한 도움말을 얻기 위해 위로 회전하고, 법적 고지 사항을 위해 아래로 회전하지만, 일반적인 사용시에는 숨겨져 있습니다.

34
demallien

나는 그것을 좋아하고 그것이 실제로 유용 할 수 있다고 생각합니다. 그러나 내부에 모든 모서리가있는 버전을보고 싶습니다.

32
colmcq

컨텐츠와 프리젠 테이션을 분리하기 위해 CSS를 사용하는 것은 매우 잘 이루어졌습니다. 텍스트 기반 브라우저 사용자와 CSS 스타일 시트를 사용하지 않는 사용자는 향상된 그래픽 환경을 선호하는 사용자는 그것을 즐길 수있을 것입니다. 실제 SSN을 공개하고 싶지 않기 때문에 완전히 테스트 할 수는 없었습니다. 내 유일한 불만은 CSS없이 볼 때 순서가 잘못되었다는 것입니다.하지만 HTML div를 다시 정렬하면 쉽게 해결할 수 있습니다.

18
blah

더 많은 질문을해야하는 단계에있는 것처럼 솔직하게 들립니다.

통계에 따르면 많은 사람들이 이전 버전의 양식을 시작했지만 완료하지 못했습니까? 이는 지루하거나 지루한 작업을 수행 할 인센티브가 충분하지 않음을 나타낼 수 있습니다. 큐브 인터페이스와 같은 참신이 도움이 될 수 있지만 양식의 길이를 줄이면 더 많은 성공을 거둘 수 있습니다. 이것이 사람들이 완료 해야하는 중요한 형태라면, 지루한 측면에서 오류가 있지만 혼동 할 수는 없습니다 (즉, not 큐브).

사람들은 적은 수의 특정 질문에서 금연 가능성이 가장 높은가요? (예 : 안녕하십니까. 익명 설문 조사에 참여하고 싶습니다! Q1 : 주민등록번호는 무엇입니까?) 양식에서 요청하는 정보 중 하나와 같이 사용자가 불편하게 공유하는 정보가 표시 될 수 있습니다. 이 경우 회전 큐브가 정답이 아닙니다.

위와 같은 질문을 한 다음 큐브 인터페이스가 문제를 해결하는 방법을 스스로에게 물어보십시오. 그것이 "소설"이라면 문제가있을 수 있습니다. 한 사람의 소설은 다른 사람의 혼란입니다.

개인적으로, 큐브 인터페이스가 눈 사탕을 추가하는 것 이외의 양식을 작성하는 과정에 실제로 의미있는 것을 추가하는 방법에 대해 어려움을 겪고 있습니다. 양식 작성은 선형 프로세스입니다. 양식의 다른 필드를 3D 객체의 측면과 연결하면 사용자가 양식을 작성하는 데 어떻게 도움이됩니까? 다른 큐브면에 인접한 필드가 실제로 방해가 될 수 있습니까?

다시 말해, 모든 큐브 인터페이스가 "지루하지 않다"라면 대안을 찾아보아야한다고 생각합니다. 양식의 언어를 꾸미십시오. "주소"대신 "정말 죽은 나무에 인쇄 된 스팸을 보내려는 장소를 지정하십시오!" (실제로 스패머 인 경우이 기능이 잘못 될 수 있습니다!). 재미있는 것을 추가하십시오. 예 : 이름 바로 뒤에 "비밀 에이전트 호출 부호"필드를 추가하십시오 (암호 복구에 유용 할 수 있음). 타이포그래피와 인터페이스로 플레이하십시오. 보기 좋은 형태로 만드십시오. (Roger가 위에 게시 한 큐브 사진은 빠르고 더러운 모형이라는 것을 알고 있지만 완성 된 양식에 원격으로 가까이 있다고 생각되면 아마도 도움이 필요할 것입니다.)

행운을 빕니다!

17
g-ball

나는 그것이 사용자 경험의 관점에서 훌륭하게 작동한다고 생각하며, 멀지 않은 미래에 all 웹 양식이이 모델을 사용합니다.

개선해야 할 유일한 제안은 애니메이션 속도를 높이는 것입니다. 양식 필드를 선택하는 것이 조금 더 어려울 수 있지만 사용자가 흥미롭고 흥미를 느끼는 추가 속도를 생각합니다.

16
Boris Hamster

당신의 디자인은 분명히 실패입니다. 충분한 인내심으로 is 실제로 양식을 작성하는 것이 가능합니다 (적어도 일부). 이를 막으려 고 노력하고 있었기 때문에 실패했습니다.

12
Jerry Coffin

당신의 예를 보았을 때, 그것은 단지 기술 데모 일 뿐이며 양식과 상호 작용하는 동안 회전하지 않을 것이라고 확신했습니다. 그러나 답변과 당신의 의견을 읽은 후에, 나는 틀렸다고 생각합니다.

회전하는 형태는 아마도 모든 방문자를 느슨하게 만들 것입니다.

대신 회전을 사용하여 양식의 다른 페이지 사이를 전환하도록 제안합니다. PC 게임 "Riddick의 연대기 : 푸 cher 간에서 탈출")의 주 메뉴 와 같은 것을 생각하고 있습니다. 당신이 그것을 빠르고 쉽게 만들 수 있다면 이것은 큰 효과를 만들 수 있습니다.

9
Znarkus

이 양식을 유감스러운 짝에 대한 링크와 같은 문장으로 사용해서는 안됩니다.

당신은 시간의 75 % 양식조차 볼 수 없습니다, 당신은 당신이 볼 수없는 유용한 양식을 어떻게 가질 수 있습니까.

인상적인 3D CSS이지만 시간 낭비.

해결 방법 : 큐브 회전을 멈추고, 눈을 가리지 않는 색상을 선택하십시오. 항상 양식을 보여주십시오!

8
dannydev

당신은 말했다 :

"그렇지 않다면 어떻게 개선 할 수 있습니까?"

다음은 몇 가지 제안입니다.

  • 내 눈을 다치게하지 않는 색상을 만드십시오.

  • 큐브 회전을 항상 중지하십시오.

  • 모든 데이터를 한 번에 볼 수 있는지 확인하십시오.

  • 즉, 올바른 입력 양식처럼 만드십시오.

6
Schroedingers Cat

매우 혁신적인 접근 방식.

그러나 패러다임 전환은 사용자 친화적이지 않다고 생각합니다. 당신이하려는 것은 사용자가 실제 생활에서 이것을하는 방식을 바꾸는 것입니다. 이것은 사용자의 인식에 도전 할뿐만 아니라 학습 곡선을 증가시킵니다.

실생활에서 이것을 상상해보십시오. 나는 큰 입방체를 들고 물건을 쓰기 위해 돌고 있습니다. 그리고 다른 사람이 어떻게 그것을 읽을 것인지 잘 모르겠습니다. 도전 과제 Eh!

더 현실적인 것을 생각하십시오.

6
Kabir Roy

마우스를 움직일 때와 같이 큐브를 마우스로 움직여야하는 것과 같이 사용자에게 전체 명령을 제공하여 사용자가 섹션 (제출, 양식, 기타)을 빠르게 선택할 수 있도록합니다. 현재 큐브가 올바른 위치로 바뀔 때까지 기다려야합니다.

5
Pir Abdul

큐브를 멈추지 않고 회전시키는 대신 큐브 회전 효과를 한 페이지에서 다른 페이지로 전환하면 개념이 정말 멋질 것이라고 생각합니다. 큐브는 첫 번째쪽으로 그리고 중지으로 회전하고 사용자에게 첫 번째면을 읽을 시간을 주어야합니다. 사용자가 그 작업을 마치면 다음 버튼을 클릭하고 큐브가 다음쪽으로 회전하는 등의 작업을 수행 할 수 있습니다.

그것은 많은 사용자를 즐겁게 할 것이라고 생각되는 흥미로운 전환을 추가합니다 :)

5
user4662

좋아, 나는 회의적이라고 인정하지만 작업 버전을 사용해 보았고 너무 재미있었습니다!!

이것은 어린이를위한 게임 가입 양식이나 무언가에 대한 절대적으로 좋은 아이디어입니다. 나는 이것으로 가입하는 것이 도전적이며 가입 자체는 당신이 얻는 상이므로 제한된 액세스 커뮤니티에 완벽 할 것입니다. 입력 필드가 적고 회전이 적고 외관이 좋으며 사용자가 드래그 할 수 있으면 시원해질 수 있습니다.

그러나 귀하의 질문에 잘 대답하면이 프로젝트의 경우에는 효과가없는 것 같습니다.

4
Taly Emmanuela

이 지루한 형태의 세상에서 오랫동안 살았던 사람으로서 누군가가 와서 장벽을 무너 뜨리고 패러다임의 변화를 일으키고 접근 가능하고 혁신적인 형태로 책을 다시 쓰는 날을 보려고 살지 않을 것이라고 생각하지 않았습니다. .. 지금까지.

유용성 관점에서 내가 좋아하는 것 중 일부는 전환율을 높이기 위해 Google과 Facebook의 사람들이 빌려야한다고 생각합니다.

입방체의 한면에 초점을 맞출 수 없음-훌륭합니다. 필드를 채우고 채우는 방법이 마음에 들지만 큐브 필드가 다시 롤백 될 때까지 기다려야 다른 필드를 빠르게 채울 수 있습니다. 30 초가 걸린 다른 양식 (농담)보다 훨씬 나은 양식을 작성하는 데 약 6 분이 걸렸습니다. 가입 페이지를 더 오래 유지하면 이탈률을 낮추는 데 도움이됩니다.

작은 읽을 수없는 레이블-왜 아무도 이것을 생각하지 않았습니까? 모든 사람은 양식을 작성하는 과정을 더 쉽게 (또는 그렇게 말하는) 수 있도록 친절하고 크고 유용한 상황 별 레이블 및 기타 사항을 만드는 데 관심이 있습니다. 레이블을 읽으려면 몇 번 확대해야했지만 큐브 속도로 인해 눈에 제대로 초점을 맞출 수 없습니다.

입방체의 속도-제목을 처음 보았을 때, 입방체 회전을 느리게하고 폼 레이블과 입력을 명확하게 볼 수있을 것이라고 생각했습니다. 나는 ~였다. 큐브의 속도는 빠르지 만 빠르지는 않습니다. 눈이 집중하기 어렵고 흐릿하게 보이지만 너무 빠르지는 않습니다. 큐브의 속도로 인해 사이트가 더 빨리 나타납니다.

그러나 아쉽게도 양식에 몇 가지 문제가 있습니다.

그 글꼴은 그리 매력적이지 않습니다-더 멋진 글꼴을 사용하는 것이 좋습니다. Comic Sans MS Bold가 아마도 내 첫 번째 선택 일 것입니다. 읽기 쉽고 회전 큐브가 더 재미있을 것입니다.

녹색은 충분히 밝지 않습니다-죄송 합니다만, 녹색은 충분히 밝지 않습니다. 좀 더 현대적으로 보이기 위해 약간의 음영을 취할 수 있습니다.

제출 버튼이 중앙에 있지 않음-큐브의 제출 버튼 쪽이 중앙에 있어야한다고 생각합니다. 현재 제출 버튼이 왼쪽에 정렬되고 버튼 내의 텍스트도 가운데에 있지 않습니다. 이것은 접근성에 좋지 않으며 두 가지 작은 조정만으로도 더 나아질 것입니다. 버튼을 검은 색 또는 흰색으로 만들어서 디자인에서 조금 더 작동하도록 고려하십시오. 회색은 매우 오래된 것으로 보입니다.

따뜻함 또는 문자 부족-애니메이션 GIF가 부족한 것이 실제로 형식에 영향을 미친다고 생각합니다.하지만 소스를 살펴본 결과 <Marquee> 태그. 미학적으로 그것은 내가 좋아하는 것에 대해 약간의 정적입니다. 거기에서의 약간의 움직임은 (물론 글꼴 변경과 함께) 더 재미있게 만들 수 있습니다.

유효성 검사 부족-내가 알 수있는 한, 귀하의 양식에는 유효성 검사 및/또는 유효성 검사 메시지가 없습니다. 유효성 검사가없는 양식은 유용성 악몽입니다. ​​가능하면 <Marquee> 유효성 검사 메시지에 태그를 지정하여 몇 년 동안 내가 만난 다른 양식과 같이보다 친근하고 덜 공격적입니다.

사회 보장 번호 레이블이 너무 깁니다-레이블이 다른 레이블보다 넓습니다. 레이블을 올바르게 정렬하거나이 텍스트를 줄 바꿈하여 줄을 더 짧고 읽기 쉽게 만들 수 있습니다. .

Google Chrome (최신) Mac OS에서는 선택 드롭 다운이 깨짐)-레이블 텍스트가 레이블 위에 나타납니다.

Google에서 다시 Chrome (최신) Mac OS에서 법적 정보 페이지의 제목이 깨짐)-실제로는 잘려서 "중요한 법적 정보 !!!"참조

느낌표가 너무 많음-왜 법률 용어 페이지에서 소리를 지르고 있습니까? 하나, 최대, 두 개의 느낌표. 규칙을 알고 있습니까? 느낌표가 너무 많으면서도 훌륭한 디자인을 망치지 마십시오.

전반적으로 훌륭한 디자인이지만 더 나은 트롤입니다. 이것은 아마도 내가 읽은 최고의 트롤 질문 중 하나 일 것입니다. Yahoo! 답변이 너무 좋습니다.

4
Dwayne Charrington

6 페이지를 넘지 않을 경우 잘 작동합니다.

페이지의 일부가 앞을 향하지 않으면 보이지 않습니다. 유용성 문제 일 수 있습니다.

회전하는 도구 모음이있는 UI가 만들어졌습니다. 다시 한 번, 4 명의 얼굴의 한계가 있었고 사람들은 혼란스럽고 실망스러운 측면을 파악할 수 없었습니다.

올바른 오리엔테이션은 도전이 될 것입니다.

그러나 때때로 사람들은 좌절하는 것을 좋아합니다. Angry Birds를보십시오. 사람들은 계속 사라지고 도전은 점점 어려워집니다. 그러나 재미있다! 그것은 모두 달성하려는 것에 달려 있습니다.

3
Tyler Langan

얇게 썬 빵 이후 가장 위대한 것

다음은 운동량을 추가하기에 좋은 라이브러리입니다. https://chrisbateman.github.io/impetus/

큐브보다 더 나아가고 싶다면 https://stackoverflow.com/questions/33629754/text-within-a-non-rectangular-shape-pentagon-or-hexagon

내 오래된 웹 사이트.

그런 다음 직업을 찾아야하고 "정상"으로 결정했습니다

enter image description here

2
Mars Robertson

왜 다른 사람들과 함께 시도하지 않습니까? 일부 사용자 테스트가 올바른 것으로 생각합니다.

이 시간 동안 프로토 타입을 만드는 데 시간을 보냈으므로 사용자가 시도해 보지 않아도됩니다. 당신은 당신이 이것을 정확히 무엇을 말하고 있는지 말하지 않았으므로, 그것이 좋은지 아닌지를 어떻게 알 수 있습니까? 개인적으로 프로토 타입이 재미 있다는 사실을 발견했습니다. 정말 재미있는 게임이 될 수 있습니다. 이 경우 사용자 테스트를 통해 긍정적 인 결과를 얻을 수 있습니다.

그러나, 당신이 게임을하고있는 것 의심합니다. 테스트 대상이 엄청나게 성가신 것을 알게 될 것입니다. 그러나 누가 알 겠어요! 그것은 사용자 테스트의 아름다움입니다. 거의 항상 당신을 놀라게 할 것이 있습니다.

2
Sauce McBoss

다음과 같이 텍스트를 세로로 재 배열하면 더 좋을 것이라고 생각했습니다.

  • 케이
  • 나는
  • 미디엄
  • 이자형
  • :)

이것이 표준 컴퓨터 화면에 있는지 솔직히 말하면이 접근법은 실패라고 생각합니다. 당신은 이미 모든 비평가들이 상당히 유효하고 깊이 있기 때문에 반복하지 않겠다는 많은 피드백을 받았습니다.

BUT

이것이 VR/AR 환경의 일부라고 생각하고 큐브를 손으로 조작 할 수 있다면, 이것은 그런 종류의 공간에 대한 입장을 형성하는 참신한 접근법이라고 생각합니다. 큐브를 제출하는 방법으로 큐브를 슬롯에 삽입 할 수도 있습니다.

1
RCburn