어떤 제품이 좋은 제품이라고 생각하십니까?

이 문제는 듣기에 익숙한가? 면접 때 누가 물어봤어요?

우리가 자주 사용하는 제품 중 좋은 제품은 무엇입니까?

우리가 앱 제품에 대해 이야기할 때, 사용자로서 당신이 가장 염려하는 것은 무엇입니까?

전반적으로 이 제품은 사용하기 좋습니까? 기능이 복잡합니까?

제품 사용자 인터페이스의 색상이 아닙니다. 보기 좋습니까?

상호 작용 역학이 멋지나요?

인터넷은 이미 모든 사람의 생활에 스며들어, 시시각각 우리에게 영향을 미치고 있다.

좋은 제품은 우리에게 편리함을 가져다 주고, 우리의 삶을 단순하고 아름답게 만들 것이다.

어떤 제품들은 사용하기에 불편할 수 있고, 제품 체험이 부족하면 우리의 생활이 복잡하고 번거로워질 수 있다.

따라서 제품이 좋은지 아닌지, 장기간 사용할 수 있는지 여부는 직접 사용자 경험에 달려 있다.

사용자 경험은 사용자의 요구를 충족시키는 데 중점을 두어 사용자에게 좋은 느낌을 줍니다.

다음으로 넬슨의 10 가지 원칙을 살펴보겠습니다. 이는 사용자 경험의 타당성을 검증하는 구체적이고 포괄적인 방법입니다.

넬슨은 누구지?

Jakob Nielsen 은 코펜하겐 데이터 전송 센터를 졸업한 인간 상호 작용 박사이다. 그는 79 개의 미국 특허를 보유하고 있는데, 주로 인터넷을 더 쉽게 사용할 수 있는 방법을 다루고 있다. 6 월 1995 65438+ 10 월 1 일' 가용성 10 원칙' 이 발표되었습니다. 1995 이후 그는 Alertbox 메일 목록과 useit.com 웹 사이트를 통해 수천 명의 웹 디자이너에게 웹 페이지 가용성에 대한 지식을 가르쳤습니다. 그의 견해 중 일부는 논란의 여지가 있을 수 있지만, 적어도 웹 디자이너의 눈에는 웹 가용성 분야의 최고 지도자이다. 2006 년 4 월 미국 컴퓨터학회 인간상호 작용 연구소에 입학해 인간상호 실천 평생 성과상을 수여받았다. 그는 뉴욕타임즈에' 사이트 가용성의 대가',' 인터넷잡지' 에' 이용의 왕' 으로 불리기도 했다.

넬슨의 10 가지 가용성 원칙은' 계발법' 이라고 불립니다.

광범위한 경험의 법칙이지, 구체적인 가용성 가이드가 아니다.

1995 에서 나왔지만 인터랙티브 디자이너의 입문 법칙으로 꼽힌다.

우리는 그것을 하나의 기준으로 끌어올릴 수 없고, 그것을 하나의 경험으로 배울 수 있다.

그런 다음 실제 디자인과 함께 사용하십시오.

왜냐하면 니켈 선생님은 웹 디자인에서 10 가지 가용성 원칙을 제시했기 때문입니다.

우리가 결합해야 할 것은 현재 모바일 인터넷의 특징이다.

그런 다음' 넬슨 10 대 원칙' 의 아키텍처에서 사용자 경험의 목표에 대해 논의합니다.

넬슨 10 대? 실용성의 원칙은 다음과 같습니다.

0 1. 상태 가시성 원리?

02. 환경 관련성 원칙?

03. 명령복구 원칙 실행 취소

04. 일관성 원칙?

05. 오류 방지 원칙

06. 도달 가능성 원칙?

07. 유연하고 효율적인 원칙?

08. 쉬운 스캔 원리?

09. 내결함성의 원리?

10. 인간화 도움말 원칙

각 항목을 개별적으로 분석해 봅시다 ~

1? 。 상태 가시성 정책?

시스템은 사용자에게 무슨 일이 일어났는지 알려주고 적절한 시간 내에 적절한 피드백을 제공해야 합니다.

사용자를 속이지 마십시오. 소통은 모든 관계의 기초이다. 또는 장비.

예: 타오바오에서, 그는 나를 끌어내려' 새로 고침을 풀어라' 고 했다. 즉 새로 고침이 아직 시작되지 않았다는 것이다. 내가 발표한 후 상태가' 새로 고치는 중' 으로 바뀌었는데, 이는 내가 지금 새로 고치는 중임을 의미한다.

이 디자인은 현재 인터페이스가 무엇인지, 무엇을 하고 있는지 알려줍니다. 전체 기능 변경 과정에서 해당 텍스트 설명을 볼 수 있습니다.

기타 예: 드롭다운 새로 고침 시 로드, 로드 완료 프롬프트, 수금 성공, 지급 성공, 실제 지급 실패 등

2.? 환경 적합성 원칙

기능과 서비스는 사용자가 사용하는 장면에 가깝고, 현재 장면에서의 사용자 경험에 부합한다.

제품의 기능과 서비스는 현실 세계에 가까워야 하고, 정보를 더욱 자연스럽고, 논리적으로 사용자가 쉽게 이해할 수 있도록 해야 한다.

예: 우리는 가게에서 물건을 살 때' 알리페이에서 5 원' 이라는 소리를 자주 들으며 환경에 가까운 디자인입니다. 상가는 네가 돈을 지불했는지 확인해야 하지만, 왕왕 바빠서 제때에 자신이 무엇을 하고 있는지 확인할 시간이 없다.

이 기능의 디자인으로 상인들은 자신이 하고 있는 일에 바쁘더라도 음성 확인을 통해 돈을 받을 수 있다.

이런 디자인은 기업과 소비자들에게 모두 우호적이고 편리하다.

3? 。 리두 원칙 취소?

제품을 사용할 때 현재 페이지를 이해하고 제어합니다.

사용자가 잘못 조작하면 언제든지 취소할 수 있으며, 사용자는 제품을 자유롭게 사용할 수 있습니다.

예 1: 우리는 위챗 위에서 서로 이야기를 나누다가 많은 글자를 썼을 때 보내서야 안에 착오가 있다는 것을 알게 되었다. 이때 위챗 리콜 기능을 사용할 수 있으며, 더 좋은 것은 리콜 메시지 옆에' 다시 편집' 기능이 있어 이전에 편집한 텍스트를 대화 상자로 되돌려 다시 편집한 후 보낼 수 있다는 것입니다. 다음 그림과 같이 나타납니다.

예 2: iOS 시스템 사진 삭제 및 철회

4.? 일관성

동일한 텍스트, 상태 및 버튼이 동일한 작업을 트리거하고 공통 플랫폼 규칙을 따라야 합니다. 즉, 동일한 언어, 기능 및 작업은 동일합니다. 주로 다음 다섯 가지 측면을 포함합니다.

1. 구조적 일관성

유사한 구조를 유지하면 새로운 구조적 변화는 사용자가 생각할 수 있게 하고, 규칙의 질서화는 사용자의 사고 부담을 줄일 수 있다.

예: 위챗 내의 각 모듈 항목에는 사용자가 각 모듈을 빠르게 이해할 수 있도록 "아이콘+문자 메시지" 구조 스타일이 통일되어 있습니다.

2. 색상 일관성

제품이 사용하는 주색은 한 페이지만 바꾸지 않고 통일하면 색상이 달라진다.

예: 타오바오의 아이콘 색상과 인터페이스 주색은 모두 주황색이고, 일부 라벨과 강조된 문자는 모두 오렌지색이다. 그림에 대한 효과적인 정보를 제외하고 전체 인터페이스는 회색, 흰색, 오렌지의 세 가지 색상으로 표현되며 인터페이스는 양호한 일관성을 유지합니다.

3. 작업의 일관성

제품이 업데이트될 때 사용자가 기존 제품에 대한 인식을 유지하고 사용자의 학습 비용을 절감할 수 있습니다.

예: 다음 그림과 같이 대화 상자와 주소록에서 왼쪽 슬라이드 아웃 작업을 위챗 사용하여 상호 작용합니다.

4. 피드백 일관성

사용자가 버튼이나 항목을 조작할 때 클릭하는 피드백은 일관성이 있어야 한다.

예: 각 QQ 그룹이 클릭되면 그룹 내 멤버 목록이 아래로 확장됩니다.

5. 텍스트 일관성

제품에서 사용자에게 표시되는 텍스트의 크기, 스타일, 색상 및 레이아웃은 일치해야 합니다.

예: 예를 들어, 위챗 몇 가지 주요 인터페이스의 글꼴입니다. 세 가지 주요 인터페이스의 내용 구조는 다르지만 목록 제목의 글꼴과 간격은 동일하여 전체 APP 가 시각적으로 편안해 보입니다.

5? 。 오류 방지 원칙

오류 메시지 힌트보다 좋아요. 디자인으로 예방할 수 있을까요? 이런 문제의 발생을 근절하다. 사용자가 동작을 선택할 때. 태어나기 전에 사용자가 쉽게 현혹되거나 잘못된 선택을 하는 것을 막아야 한다.

1. 사업 범위와 조건을 제한하다.

예: 인증 코드를 입력하기 전에 하단의 로그인 버튼이 회색으로 표시되어 클릭할 수 없습니다. 맨 아래에 있는 로그인 버튼은 완전히 기재된 후에만 클릭이 가능합니다. 이것은 사용자가 더 많은 실수를 저지르는 것을 방지하기 위한 것이다.

2. 위험이 있는 수술은 어떻게 합니까? 2 차 확인

예: 친구를 삭제할 때 2 차 팝업을 통해 방오 조치를 준다.

6.? 원칙에 쉽게 접근하다

사용자의 메모리 부하를 줄이고 필요한 정보를 적시에 제공합니다.

1. 사용자에게 기록, 관심, 수집 등의 기능을 제공합니다.

예: 아이치예는 사용자에게 독서 기록과 나의 소장품을 제공하여 그들이 기억할 수 있도록 도와준다.

2.? 투자 대신 선택하고 투자 비용을 최소화하십시오.

예 1: 택시 소프트웨어가 자동으로 현재 위치를 가져옵니다.

예제 IOS 시스템이 인증 코드를 받으면 자동으로 키보드로 가져와 직접 입력을 클릭합니다.

7.? 유연하고 효율적인 원칙

신규 사용자의 경우 기능을 명확하게 해야 하며, 기존 사용자의 경우 고주파 기능을 빠르고 효율적으로 사용해야 합니다. 특정 유형의 사용자를 위해 불필요한 정보의 중요한 부분을 차지하지 마십시오. 주로 세 가지 측면에 반영됩니다.

1. 기능 또는 모듈이 표시되는 위치를 사용자 정의합니다.

예: AliPay 홈 페이지의 응용 프로그램은 자주 사용하는 응용 프로그램 정의, 정렬, 삭제, 추가 등 원하는 대로 사용자 정의할 수 있습니다. 이를 통해 사용자는 자신의 개인적 관심사에 따라 자신에게 적합한 애플리케이션 배포 방법을 사용자 정의할 수 있습니다. 이를 일반적인 기능이라고 하는 사용자 정의라고 합니다. 다음 그림에 나와 있습니다.

2.? "공통" 을 자동으로 요약하고 사용 효율성을 향상시킵니다.

예: 위챗 채팅 인터페이스의 표정탄창에' 최근 사용' 모듈이 있어 개인이 평소 가장 자주 사용하는 표정이나 가장 자주 사용하는 표정을 분류한다. 사용자가 사용할 때 자신이 좋아하거나 자주 사용하는 표정을 빠르게 찾아 채팅 효율성을 높일 수 있습니다. 내 주문의 모든 주문 (으어러머) 포함) 은 다음 그림과 같이 한 번의 클릭으로 주문할 수 있습니다.

3. 수술 경로 단축, 조작성 향상? 사용 효율성 및 경험

예: 위챗 대화 상자에서 "+"를 클릭하여 다음 동작 옵션을 불러오면 사용자가 직접 검색할 수 있도록 방금 촬영했거나 촬영한 사진이 기본적으로 팝업되고, APP 를 길게 누른 후 나오는 바로 가기 작업 목록이 있습니다.

8.? 단순 스캔 원리

리터럴 번역: 미적 및 간단한 디자인; 페이지는 관련이 없거나 거의 필요하지 않은 정보를 포함해서는 안 되며, 페이지의 각 추가 정보는 주요 컨텐트의 상대적 가시성을 떨어뜨립니다.

예: 아래 목록에 있는 정보는 배송비, 배송시간, 거리 등 사용자가 관심을 갖는 모든 정보입니다. Ctrip 은 다음 그림과 같이 사용자가 한눈에 볼 수 있도록 가장 중요한 시간과 항공권 가격을 강조합니다.

-응? 9? 。 -응? 내결함성의 원칙

리터럴 번역: 사용자가 오류를 식별, 진단 및 복구할 수 있도록 도와줍니다. 우리는 사용자의 실수를 피하기 위해 최선을 다하지만, 오류가 발생할 경우 사용자의 좌절감을 달래기 위해 최선을 다해야 한다.

-응? 그림+문자로' 404' 대신 사용자에게 명시적으로 알려주나요? 오류 및 해결 방법.

예: 인터페이스 로드 실패 시 새로 고침 프롬프트, 로그인 시 휴대폰 번호 확인. 휴대전화 형식이 틀리면 휴대전화 형식이 잘못되어 정확하다는 메시지가 나타납니다.

-응? 10? 。 -응? 인간적인 도움

도움말 힌트를 얻는 가장 좋은 방법은 다음과 같습니다.

1. 자동: 잘 이해합니다. 힌트가 없는 인터페이스를 보면 어떻게 작동하는지 알 수 있습니다.

2. 일회성 힌트: 사용자는 한 번만 힌트를 주면 사용 방법을 알 수 있습니다.

예: 흔히 볼 수 있는 새로운 기능인 부트, 부트? 잠깐, 예를 들어,

3. 영구 알림:? 사용자를 안내하거나 돕는 중요한 팁;

예: 알리페이에서 이체할 때 맨 위에는 항상 안전 확인 힌트가 있고, 이체할 때도 봉사료 힌트가 있습니다. 아래 그림과 같습니다.

4. 도움말 문서: 좀 더 복잡한 소프트웨어, 가능한 한 간단해야 하지만 도움말 문서는 필수입니다.

예: 위챗 설정 인터페이스의 "도움말 및 피드백", 알리페이가 이체할 때 팝업되는 "도움말 피드백", 클릭 후 FAQ 인터페이스

Jakob Nielsen 의 10 대 상호 작용 설계 원칙에 대한 저의 이해와 사례 해석입니다. 여러분께 도움이 되기를 바랍니다. 당신도 이러한 부면에 관심이 있거나, 보고 나서 무슨 생각이 있다면, 함께 검토해 보시기 바랍니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 예술명언)