온라인 도움말 모범 사례
현재 상당히 복잡한 웹 포털을 개발 중입니다. 사용자 환경을 개선하기 위해 사이트의 특정 측면을 이해하는 데 도움이되는 상황에 맞는 온라인 도움말 시스템을 제공하고자합니다.
우리의 경우 사이트에는 모든 종류의 테이블 형식 데이터, 그래프 등을 표시하는 다양한 위젯이 있습니다. 예를 들어, 이러한 위젯 중 하나는 VIX 및 도움말 시스템은 VIX에 대한 간단한 설명을 제공합니다.
이제 인터넷을 둘러보고 온라인 도움말의 디자인 점검표 와 같은 흥미로운 기사를 찾았지만 발견 한 내용의 대부분은 상당히 오래된 것 같습니다. 내가 특히 관심이있는 것은 다음과 같은 디자인 문제입니다.
- 팝업, div 또는 외부 페이지에 대한 링크 사용 여부
- 지원 항목이 얼마나 포괄적이어야합니까? 평균 사용자가 얼마나 읽고 싶어합니까?
- 도움말 시스템에 액세스 할 수있는 좋은 방법은 무엇입니까? 물음표 아이콘으로 UI를 복잡하게 만드는 것은 확실하지 않습니다.
- AJAX (kinda 짜증, 정보를 즉시 원함)) 또는 사전로드 (필요하지 않은 많은 트래픽을 유발)로 도움말 항목을 요청시로드해야하는 경우
- 다른 행동과하지 말아야 할 것
이러한 질문 중 일부에 대한 답변은 명백해 보일 수 있지만 유용성에 관해서는 직관적 인 답변이 항상 최선이 아니라는 경험을했습니다. 둘째, 저는 소프트웨어 개발자이며 엔지니어의 관점에서 사물을 보는 경향이 있습니다. 그리고 우리 모두는 이것이 사용자 인터페이스 디자인에 접근하기에는 꽤 열악한 각도라는 것을 알고 있습니다. 그렇기 때문에이 분야에 경험이 많은 사람들로부터 피드백을 받고 싶습니다.
나는 좁은 응답에 기여할 것이므로 모든 질문에 대답하지는 않을 것입니다.
몇 년 전 Andrea Ames가 UBC의 다운타운 캠퍼스에서 열린 소규모 회의에서 발표 한 연구에 따르면 임베디드 지원과 유용성이 도움말보다 낫습니다. 그녀는 세 가지 다른 헬프 전달 방법을 가정 금융 소프트웨어와 비교 한 방법에 대해 이야기했습니다. 사용자는 내장 된 지원을 도움말 형식으로 인식하지 않으며 소프트웨어를 통해 지시하고 안내하는 정보를 사용하는 대신 "소프트웨어 만 사용하고"있다고보고합니다. 사용자가 문제를 겪을 때 종종 가장 마지막으로하고 싶은 일은 풀고 다른 것을 시작하는 것입니다. 많은 사용자의 경우, 도움말을 시작하면 "다른 것"의 범주에 맞지만 비논리적 일 수 있습니다. 마지막으로 Andrea는 IBM에서 일하고 있다고 들었습니다. embedded assist 레이블과 버튼 이름이 아니라 사용자 인터페이스에 직접 표시되어 텍스트의 방향, 설명, 지시 및 컨텍스트를 제공하는 텍스트를 나타냅니다.
로이스 호크 (Lois Hawk)는 뇌에서 뇌 자극 반응 (looming-stimulus response)이라고 불리는 비자발적 반응에 대해보고했다. 호랑이와 같이 시야에서 예기치 않은 변화가 일어 났을 때 뇌는 다음과 같이 반응합니다. 팝업이이 involuntary 응답을 트리거하여 도움말 팝업으로 사용자의 단기 메모리를 비우고 스트레스를 증가 시킨다고 생각할 수 있습니다. 그들이 왜 그 경험을 싫어하는지는 확신 할 수 있지만 그 경험은 싫어할 것입니다. 이 연구 논문은 2000 년 호놀룰루에서 개최 된 STC 공동 지역 7 & 8 회의에서 발표되었다 (저는 그 해 였다고 생각한다). 사본을 찾기가 어렵습니다.
사람들이 읽게하는 것은 어려울 수 있습니다. 때때로 그들은 그들이 원하는 것을 알고 있다고 가정하고 도움을 읽는 것을 거부 할 것입니다. 분명한 대답은 설명이 필요없는 앱을 너무 간단하게 만드는 것입니다. 그러나 항상 쉬운 것은 아니며 오랫동안 고투해온 문제입니다.
그러나 상황 별 도움말 측면에서 텍스트 상자에 초점을 맞출 때마다 도움말이 표시되도록 선택했습니다. 예를 들어 아래의 주황색 상자는 우편 번호 텍스트 상자에 초점이있는 경우에만 표시됩니다. 
이런 식으로 사용자는 도움말을 표시하기 위해 아이콘을 클릭 할 필요가 없습니다. 앱을 작성할 때 자연스럽게 나타납니다.
물론 모든 것이 작동하지는 않습니다. 라디오 버튼이나 체크 박스에서는 작동하지 않으므로 자신의 메커니즘을 발명해야합니다. 작은 i 정보 아이콘은 질문 옆에 잘 작동합니다.
나는 당신의 다른 질문에 대답하려고 노력할 것입니다 ...
팝업, div 또는 외부 페이지에 대한 링크 사용 여부
아무도 팝업을 좋아하지 않습니다. 가능하면 위 그림과 같이 도움말이 나타날 수있는 각 필드와 함께 빈 자리를 찾으십시오. 이렇게하면 아무것도 덮지 않습니다. 요점을 파악하면서 가능한 한 모든 것을 (도움말 포함) 간결하게 유지하십시오.
AJAX (kinda 짜증, 정보를 즉시 원함)) 또는 사전로드 (필요하지 않은 많은 트래픽을 유발)로 도움말 항목을 요청시로드해야하는 경우
다루고있는 도움말 텍스트의 양에 따라 여기에서 옵션을 평가해야합니다. 어쨌든 gzip 압축을 사용하는 경우 HTML로 모두 유지하는 것이 그리 중요하지 않을 수 있습니다.
저는 툴팁에 부분적이거나 기본 지침을 제공하고 항상 고급 상황에 맞는 도움말을 제공하는 항상 보이는 영역을 불러냅니다. 툴팁은 물음표 나 그와 같은 것들에 관한 경향이 있지만, 로트가 필요한 경우에는이 목적을 위해 초기 설계에있는 간단한 설명 선 영역을 사용하십시오.
툴팁 또는 콜 아웃은 ID를 사용하여 올바른 도움말 항목으로 이동합니다. 새 창/탭/팝업/div를 열지 않지만 고급 도움말을 원하는 경우 화면 ID와 툴팁/설명 선 ID를 사용하여 눈에 띄는 링크 BACK을 사용하여 해당 페이지로 이동합니다. 양식을 채운 상태로 유지하십시오.
고급 도움말이므로 관련 항목과 전체 도움말 탐색에 대한 링크가있는 "RoboHelp"스타일의 도움말로 돌아가는 경향이 있습니다. 내가 작업하는 대부분의 응용 프로그램은 서로 다른 수준의 액세스/사용자 유형/역할 속성으로 인증되므로 도움말에서 탐색 할 수있는 항목은 사용자 토큰을보고 표시 할 정보를 결정합니다.
이 중 일부가 수신자의 요점 대부분에 도움이되기를 바랍니다.
응용 프로그램이 특정 주제에 초점을 맞추고 머리 글자/이상한 용어로 가득 찬 경우 사용자는 해당 응용 프로그램이 집중된 응용 프로그램임을 알게되고 (배우면 생산성이 향상 될 수 있음) 학습 경험에 참여하고 싶어합니다. 문제는이 기꺼이 첫 세 번째 만남을위한 것이라는 것입니다.
처음 사용하는 경우 사용자에게 안내 자습서를 원하는지 물어볼 수 있습니다. 강조 표시된 내용을 제시하는 단계에서 마법사처럼 만들거나 사용자가 클릭/초점을 맞추고 현재 요소에 대한 도움말을 제공 할 수 있습니다. IMO는 튜토리얼 게임 경험과 같습니다. 컨트롤을 배우고 목표를 얻습니다. 사용자는이 자습서를 언제든지 종료 할 수 있어야합니다. 원하는 경우 다시 방문하여 자습서 초대를 다시 보지 않아야합니다. 이 경험은 초보자에게 제공되어야합니다.
중급/고급 사용자의 경우 두문자어 및 제목/도움말 요소만으로도 충분하다고 생각합니다 (즉, 명확한 IA 및 직관적/일관된 요소가있는 경우). 툴팁은 사용자의 방식대로 유지되지 않지만 사용자가 성가 시게 도움을 필요로하는 경우가 있습니다. 그것들은 꽤 이산 적이지만 여전히 관찰 가능한 스타일이어야합니다.
온라인 도움말 도구로 라이브 채팅을 사용하는 링크입니다. 도움이 되길 바랍니다. https://www.experienceux.co.uk/ux-blog/2017/05/30/6-steps 배달-일등석 라이브 채팅 사용자 경험 / =
게시물 요약 :
실시간 채팅 클릭 유도 문안을 쉽게 표시/액세스 할 수 있도록합니다 (예 : 웹 사이트의 오른쪽 하단 영역).
클릭 유도 문안을 나머지 페이지 콘텐츠 (예 : 몇 초 후) 후에로드하여주의를 기울이십시오.
사람의 이름과 사진을 보여줌으로써 '이것이 진짜 사람인가?'장벽을 극복하는 데 도움이됩니다.
브라우저 창 내에서 대화 창을 제자리에로드하고 사용자가 대화 창을 최소화하여 사용자가 병렬로 쉽게 탐색 할 수 있도록합니다.
Facebook Messenger 및 WhatsApp과 같은 친숙한 메시징 서비스의 디자인 패턴을 따라 사용자가 새로운 것을 배울 필요성을 줄입니다.
새 메시지 알림을 표시하면서 웹 채팅 창이 최소화되도록합니다.