Michiel은 피드백에서 저장에 이르기까지 사용자에게 직관적이고 학습 가능한 인터페이스를 제공하는 데 사용할 수 있는 5 가지 권장 사항을 소개합니다.
제품이나 웹 사이트의 학습 가능성을 개선하는 것을 고려한 적이 있습니까? 학습 가능성의 개념에 대해 처음 읽었을 것입니다. 학습 가능한 웹 사이트를 구축하는 것은 약간의 실험과 A / B 테스트가 필요하기 때문에 쉬운 작업이 아닙니다.
Learnability의 목표는 사용자가 빠르게 익히고 이해할 수 있는 명확한 인터페이스를 디자인하는 것입니다. 이상적으로는 사용자에게 제품 사용 방법을 교육하기 위한 문서가 필요하지 않습니다.
다행히도 학습 가능한 인터페이스를 만드는 많은 기술이 있습니다. 이 문서에서는 사용자에게 보다 학습 가능한 인터페이스를 제공하는 데 사용할 수 있는 5 가지 모범 사례를 보여줍니다.
하지만 먼저 학습 가능성이 중요한 이유를 명확히 하겠습니다.
학습 능력이 중요한 이유는 무엇입니까?
이제 학습 가능성이 중요한 이유는 무엇입니까? 더 배우기 쉬운 사용자 인터페이스 제공을 고려해야 하는 여러 가지 이유가 있습니다.
우선 사용자는 새 인터페이스를 훨씬 더 빨리 채택 할 수 있습니다. 따라서 도구를 사용하여 목표를 훨씬 빠르게 달성 할 수 있습니다. 즉, 도구에서 더 많은 가치를 얻을 수 있습니다. 또한 문서 화나 광범위한 지원 센터가 거의 필요하지 않습니다. 목표는 명확한 인터페이스를 제공하여 지원 요청 수를 줄이는 것입니다.
그게 다가 아닙니다! 고객 경험에 대해 생각하십시오. 도구를 빠르게 배울 수 있는 사용자는 더 나은 경험을 갖게 됩니다. 결국 사용자는 가능한 한 최소한의 시간 내에 가치를 받기를 원합니다. 그들은 새로운 도구를 배우는 데 많은 시간을 소비하기를 원하지 않습니다.
마지막으로 학습 가능성은 유지율에 중요합니다. 복잡한 인터페이스는 사용자를 놀라게 할 것입니다. 종종 그들은 동일한 가치를 제공하는 더 쉬운 대안을 찾을 것입니다.
학습 가능성의 중요성을 이해 했으므로 학습 가능성을 높이기 위한 5 가지 모범 사례를 살펴 보겠습니다.
1. 일관성
먼저 일관성의 중요성에 대해 논의하겠습니다. Google은 모든 제품에 유사한 모양을 제공하기 위해 머티리얼 디자인을 통해 일관성을 유지했습니다. 따라서 사용자가 Google 제품간에 전환 할 때 새 제품의 작동 방식을 훨씬 더 쉽게 이해할 수 있습니다.
왜? 사용자는 이전에 이 디자인을 본 적이 있으며 상호 작용하는 방법을 알고 있습니다. Google 드라이브와 Gmail의 인터페이스를 비교해 보겠습니다. 검색 창, 메뉴 및 작업 단추와 같은 요소 위치의 유사점에 유의하십시오.
예를 들어 Google 드라이브에는 새 파일이나 폴더를 만들기 위해 '새로 만들기'라는 텍스트가 포함 된 큰 클릭 유도 문안 버튼이 있습니다. 이것을 Gmail과 비교해 보면 새 이메일을 작성하는 것과 동일한 클릭 유도 문안 버튼 인 '작성'이 있습니다. 이렇게 하면 Gmail을 처음 사용하지만 Google 드라이브를 자주 사용하는 사용자가 이 큰 버튼의 목적을 빠르게 이해할 수 있습니다.
요컨대 일관된 인터페이스는 예측 가능한 인터페이스입니다. 이러한 예측 가능성은 학습 가능한 패턴으로 이어집니다. 이것은 사이드 바 메뉴에서 아이콘 사용 또는 링크 색상에 이르기까지 모든 것에 적용됩니다.
2. Feedback
피드백은 모든 UI 디자인 책에서 찾을 수 있는 키워드 중 하나입니다. 가장 기본적인 피드백 형태 중 하나는 하이퍼 링크 피드백입니다.
하이퍼 링크는 세 가지 상태를 가질 수 있습니다. 우선, 하이퍼 링크는 정상 상태에 있습니다. 사용자가 커서로 하이퍼 링크를 가리키면 링크 색상이 변경되거나 사용자에게 작은 전환 애니메이션이 표시됩니다. 이 작은 피드백 순간은 사용자에게 요소를 클릭 할 수 있음을 알려줍니다. 하이퍼 링크를 클릭하면 활성 상태가 표시됩니다. 다시 말하지만 이것은 사용자에게 클릭 요청이 수신되어 처리 중임을 알리는 피드백 형식입니다.
피드백은 매우 미묘할 수 있습니다. 이를 마이크로 인터랙션이라고합니다. 마이크로 인터랙션은 다음과 같은 형태를 취할 수 있습니다.
사용자는 자신이 수행 한 작업이 페이지에 영향을 미쳤다는 증거가 필요하기 때문에 이러한 마이크로 상호 작용은 매우 중요합니다. 버튼을 클릭하여 양식을 제출했는데 버튼이 어떤 종류의 피드백도 제공하지 않는다고 가정 해 보겠습니다. 즉, 페이지는 정적으로 유지됩니다. 귀하의 행동에 대한 증거를 받지 못했기 때문에 두 번째로 제출 버튼을 누르실 것입니다.
따라서 친절하고 사용자에게 피드백을 제공하십시오. 그것은 그들의 경험을 훨씬 더 좋고 덜 혼란스럽게 만들 것입니다.
3. 바퀴를 재발 명하지 마십시오
바퀴를 재창조하는 대신 기존의 설계 솔루션을 활용하여 설계에 친숙함을 더하십시오. 예를 들어 햄버거 메뉴는 모바일 장치에서 메뉴를 숨기는 데 가장 적합한 솔루션 중 하나입니다. 그러나 모두가 햄버거 메뉴의 작동 방식과 목적을 알고 있기 때문에 햄버거 메뉴의 대안을 디자인 할 필요가 없습니다.
Rifayet Uday의 디자인을 살펴 보겠습니다 (아래 그림 참조). 다양한 햄버거 디자인이 미적으로 멋지게 보이고 원래 디자인에 많은 변형을 추가하지는 않지만 원래 햄버거 메뉴 디자인을 고수하는 것이 좋습니다. 사용자를 혼동하지 않으려 고합니다.
따라서 업계 모범 사례를 따르십시오. 웹 사이트 레이아웃에도 동일하게 적용됩니다. 효과가 있는 것과 계속해서 사용되는 것에 충실 하십시오. 예를 들어, 장바구니는 웹 사이트의 오른쪽 상단에 있습니다. 펑키하지 말고 왼쪽 하단에 장바구니를 놓으세요. 이것은 사용자를 혼란스럽게 할 뿐입니다.
사용자가 귀하의 인터페이스 디자인을 이해하지 못할 때 종종 귀하의 웹 사이트를 포기하거나 더 나은 사용자 경험을 제공하는 대체 웹 사이트를 찾게 된다는 점을 이해하는 것이 중요합니다.
4. 친숙함
친숙함을 통해 사용자는 이전 지식을 바탕으로 새로운 인터페이스를 더 빨리 배울 수 있습니다. 즉, 친숙 함은 정신적 모델을 사용합니다. 사용자는 한 제품의 멘탈 모델을 새 제품으로 전송할 수 있습니다. 즉, 유사한 인터페이스에 대한 기존 지식을 사용하여 새 인터페이스를 더 빨리 채택 할 수 있습니다.
정신 모델은 어떤 일이 어떻게 작동하는지에 대한 사람의 사고 과정을 나타냅니다. 정신 모델은 불완전한 사실, 과거 경험, 심지어 직관적 인 인식을 기반으로 합니다. 그들은 행동과 행동을 형성하고, 복잡한 상황에서 사람들이 주의를 기울이는 것에 영향을 미치며, 사람들이 새로운 문제 나 인터페이스에 접근하고 해결하는 방법을 정의합니다. — Susan Carey, 1986 년 "인지 과학 및 과학 교육"저널 기사
또한 친숙 함은 신뢰성을 생성하고 사용자가 익숙하지 않은 인터페이스를 탐색하고 사용할 때 자신감을 느끼도록 도와줍니다. 예를 들어 웹 사이트에 Google의 머티리얼 디자인 언어를 적용하면 사용자가 요소를 인식하고 요소와 상호 작용하는 방법을 알 수 있습니다. 따라서 예상되는 작업을 알기 때문에 특정 버튼을 클릭하는 것을 두려워하지 않습니다. 사용자가 새로운 도구를 탐색하는 데 대한 두려움을 제거하려면 안정성이 중요합니다.
팁 : Font Awesome과 같은 공통 아이콘 세트를 사용하여 인터페이스에 친숙 함을 추가하십시오.
5. 스토리
때로는 파괴적인 사용자 인터페이스가 필요한 완전히 새로운 제품을 출시하고 싶을 때가 있습니다. 여기서는 학습 과정의 속도를 높이기 위해 이전 팁에 의존 할 수 없습니다.
이 경우 스토리 텔링을 통해 프로세스 속도를 높일 수 있습니다. 스토리 텔링을 사용하면 공유하는 정보를 이해하기 쉽고 기억하기 쉽게 만들 수 있습니다. 가급적이면 텍스트 기반 스토리 텔링보다 시각적 인 스토리 텔링을 사용해야 합니다. 사용자는 인터페이스에 대해 배우기 위해 많은 양의 텍스트를 읽고 싶어하지 않습니다.
여기서 가장 잘 작동하는 것은 무엇입니까? 인터페이스의 모든 중요한 요소를 통해 사용자를 안내하는 대화 형 시각적 스토리를 디자인합니다. 스토리를 짧게 유지하고 사용자가 시작하는 데 필요한 초보자 요소에만 집중하세요. 고급 사용 사례를 설명 할 필요가 없습니다. 이러한 종류의 주제는 추가 가이드에서 다룰 수 있습니다. 새로운 정보가 학습 과정에 반대의 영향을 미치므로 사용자에게 새로운 정보를 제공하고 싶지 않습니다.
참고 : 디자인의 스토리 및 스토리 텔링에 대해 자세히 알아볼 수 있습니다.
결론 : 학습 가능성 및 패턴 인식
사용자 인터페이스의 학습 가능성을 높이기 위한 많은 팁이 있습니다. 그러나 위의 모든 권장 사항은 패턴 인식에 의존한다는 것을 아는 것이 중요합니다. 따라서 사용자가 인터페이스에서 패턴을 감지 할 수 있도록 사용자의 이전 지식을 활용하는 인터페이스를 설계하는 것을 목표로 합니다. 사용자가 이러한 패턴을 감지하도록 허용하면 익숙하지 않은 인터페이스를 빠르게 학습하는 데 도움이 됩니다.
학습 가능성을 구현하여 얻을 수 있는 진정한 가치가 있다는 것을 알았기를 바랍니다. 개인적으로 학습 가능성에 주의를 기울이는 가장 중요한 측면은 사용자 경험을 개선하는 것입니다. 오늘날 제품은 사용자를 염두에 두고 개발됩니다. 그렇다면 인터페이스의 학습 가능성 요소를 고려하지 않는 제품을 개발하는 이유는 무엇입니까? 놀라운 제품을 가질 수 있지만 복잡한 사용자 인터페이스를 가질 수 있습니다.
따라서 사용자 인터페이스의 학습 가능성을 개선하는 데 시간을 투자하십시오. 사용자 경험에 대한 긍정적 인 효과에 놀라실 수 있습니다.
등록된 댓글이 없습니다.
