UI/UX 설계
인터랙티브 프로토타입
[ 시니어를 위한 채팅 어플리케이션 음성 인터페이스(VUI) 개선 ]
문서 정보 : 페이퍼 프로토타입 보고서 문서 버전 : ver 1.0
제출일 : 0000 년 00 월 00 일 팀 명 : 시니어톡
작성자 : 팀원 1, 팀원 2, 팀원 3, 팀원 4
1. 프로젝트 개요
1-1. 요약
본 프로젝트에서는 시니어를 위해서 채팅 어플리케이션 ‘카OO톡’의 음성 인터페이스(VUI)를 개선하여, 시
니어 사용자를 포함한 전체 사용자의 편의성과 서비스 이용률을 높이는 것을 목표로 한다.
1-2. 프로젝트의 배경
어플리케이션에 친숙하지 않은 시니어 층에서는 카OO톡 사용률이 매우 낮다. 섬세하고 빠른 터치에 어려
움을 느끼는 시니어층은 키보드 자판을 치는 것을 어려워한다. 또한 음성 메시지, 사진, 동영상 전송 등 다양 한 기능이 있다는 것을 모르는 시니어층이 많아, 아예 시도하려고 하지 않는 시니어층이 대다수이다. 이런 기 능을 이용하는데 까지의 절차가 복잡하고, 조작이 어려워 단순히 메시지 보내는 것 외에 다른 부가 기능은 거 의 사용하지 않는다. 따라서 기존 채팅 어플리케이션 ‘카OO톡’의 음성 인터페이스를 개선하여 시니어층이 음성 인터페이스로 편리하게 카OO톡 어플리케이션을 사용하도록 하고자 한다.
1-3. 기존 카OO톡 어플리케이션의 문제점
1) 시니어층이 이해하기 어렵고 절차가 복잡한 음성 메시지 기능
채팅 방 내 음성 메시지 기능을 이용하는데 까지의 절차가 복잡하고 조작이 어려워, 음성 메시지 기능을 아 예 시도조차 하지 않는 시니어층이 대다수이다. 또한 음성메시지 기능은 텍스트가 아닌 음성 녹음파일로 전 송되어 음성메시지를 받는 사람이 메시지를 확인하는데 어렵다.
2) 존재하지 않는 음성 기능
기존 카OO톡 앱에서 음성 메시지 기능 외에는 음성기능을 사용하여 할 수 있는 기능이 존재하지 않는다.
1-4. 해결 방안 개요
시니어층이 작고 섬세한 키보드 자판을 이용하거나, 복잡한 버튼 클릭을 통해 조작하는 방법 대신 음성을 이 용하여 쉽게 다양한 기능을 수행할 수 있도록 한다. 그래서 현재 카OO톡의 음성 인터페이스를 확장시켜 GUI로 수행하던 많은 일을 VUI로 대체하는 것을 목표로 한다.
1) 음성 명령 인터페이스를 생성
카OO톡 어플리케이션 내에서도 이러한 음성 명령 기능을 사용하여, 시니어층이 작고 섬세한 키보드 자 판을 사용하지 않고 음성을 이용하여 쉽고 다양한 기능을 수행할 수 있도록 한다.
2) 음성 메시지 전송 인터페이스를 생성
음성 메시지 전송 기능을 사용하여, 시니어층이 전송하려고 하는 메시지를 음성으로 말하면, 음성이 텍스 트로 화면에 보여주도록 한다.
2. 인터페이스 설계 변경
사용자 테스트 결과를 바탕으로 각각의 작업에서 인터페이스를 변경한 부분은 다음과 같다.
1) 문제점#1
관측된 사항 : 친구 찾기를 하면 그 친구의 프로필 화면으로 전환되어 당황한다.
변경 사항 : 프로필 화면으로 전환시 “1:1 채팅방으로 이동하려면 채팅방 이동 이라고 말해주세요.”라는 멘 트가 나오도록 한다.
2) 문제점#2
관측된 사항 : 갤러리에서 사진을 선택하는데 시간이 오래 걸린다.
변경 사항 : 갤러리에서 사진 선택 시 음성도 되지만 손으로 직접 선택해도 가능하도록 한다.
3) 문제점#3
관측된 사항 : 메시지를 입력한 후, 입력한 메시지를 확인하다가 오타가 생긴 것을 알고 매우 당황해하였다.
변경 사항 : 음성 메시지를 수정할 수 있다는 멘트를 삽입한다.
4) 문제점#4
관측된 사항 : 음성 명령을 하는데 시간이 오래걸린다. / 사용자가 잘못 음성 명령을 하면 전환되는 화면이 존 재하지 않는다.
변경 사항 : 음성 명령을 잘못 말하면, 다시 말씀해달라는 멘트가 나오도록 한다.
[문제점#1] [문제점#2] [문제점#3] [문제점#4]
3. 대표작업 시나리오
• 대표작업 시나리오 1
간략 시나리오 : 봉사 참여하는 사진을 찍어, 같이 봉사한 사람들에게 사진들을 전송하는 상황 친구 찾기, 1:1 채팅방 들어가기, 사진 전송하기 기능
• 대표작업 시나리오 2
간략 시나리오 : 손녀에게 어제 온 메시지를 확인한 후 답장하는 상황
1:1 채팅방 들어가기, 상대방의 지난 메시지 읽기, 메시지 입력, 메시지 수정하기 기능
• 대표작업 시나리오 3
간략 시나리오 : 임원진에게 다른 팀원의 연락처를 전송하는 상황 1:1 채팅방 들어가기, 메시지 입력, 메시지 수정하기, 연락처 전송 기능
4. Hi-fi 프로토타입 설명
인터랙티브 프로토타입 링크: 피그마 URL
4.1 작성 도구 및 환경
‘시니어톡’은 페이퍼 프로토타입 및 사용자 평가를 통해 개선된 시스템의 최종 사용자 인터페이스 화면을 인 터랙티브 프로토타입으로 제작하였다. 본 Hi-fi 프로토타입은 웹 기반 디자인 툴 ‘Figma’로 제작되었다.
‘Figma’는 여러 사람과 실시간 협업이 가능하고, 다양한 폰트를 적용할 수 있으며 인터랙티브 프로토타입에 애니메이션 효과를 적용할 수 있다는 장점을 가지고 있다. 최종 결과물은 URL로 저장했다.
시니어톡은 음성 인터페이스 기반으로 작성한 프로토타입이다. 따라서 사용자가 직접 버튼을 클릭하여 화면 을 전환하는 것이 아니라, 음성으로 명령하면 화면이 전환되고 기능이 수행된다. 디지털 프로토타입에서는 사용자가 음성 명령 하는 것을 카OO톡 앱 내에서 알아듣는다는 것으로 가정하고, 개발자가 제어권을 가지 고 실험자의 발화에 따라 적절한 화면으로 전환한다.
개발자가 카OO톡 화면에 임의로 “진행”, “다시” 버튼을 추가하였다. 개발자가 실험자의 음성을 듣고 제대 로 입력되었다고 판단하면, 진행 버튼을 클릭하여 다음 화면으로 전환시킨다. 실험자가 음성 명령을 정해진 대로 하지 않으면 다시 버튼을 클릭하여 “잘 못들었습니다. 다시 말씀해주세요”라는 멘트 화면으로 전환되도 록 한다. 그 후 다시 이전 화면으로 전환되어 다시 음성명령을 할 수 있도록 하였다.
카OO톡 채팅방에서 스크롤은 여러 화면으로 구성하여 스크롤 되는 것처럼 보이도록 구현하였다.
사용자가 테스트할 때 음성명령 해야 하는 규칙은 작업지시서에 자세하게 작성하였다.
4.2 프로토타입 개요
Hi-fi 프로토타입 개요에서는 아래의 시나리오에 따라서 주요 기능을 설명하였다.
1) 시나리오#1
시나리오#1의 주요 기능은 친구 찾기, 1:1 채팅방 들어가기, 사진 전송하기 이다.
음성 명령을 이용하여 친구를 찾아 프로필을 확인한 후, 1:1 채팅방을 생성한다.
채팅방에서 사진을 전송하기 위해서 사진 전송 기능을 음성으로 명령한다. 갤러리 화면으로 전환되면, 갤러 리를 보고 위치로 사진을 선택한다. 전송할 사진을 확인한 후 사진을 전송한다.
2) 시나리오#2
음성 명령으로 단체 채팅방을 생성한 후, 단체 채팅방에 초대할 친구들을 검색하여 추가한다.
채팅방 내에서 음성 메시지 모드로 전환한 후, 음성으로 메시지를 입력한다. 입력한 메시지를 확인한 후 메시 지를 전송한다. 채팅방 내에 있을 때 상대방에게 새로운 메시지가 오면, 바로 앱에서 메시지를 읽어준다.
3) 시나리오#3
친구 탭에서 음성 모드로 전환한다. 친구를 찾은 후, 친구의 프로필에서 1:1 채팅방으로 들어간다.
이름으로 친구를 찾아서 1:1 단체 채팅방에 입장한다. 상대방이 방금 보낸 메시지를 음성 모드를 활용하여 읽는다.
4) 시나리오#4
친구 탭에서 음성모드로 전환한다. 친구를 찾은 후, 친구의 프로필에서 1:1 채팅방으로 들어간다.
채팅방 내에서 날짜를 이용하여 상대방의 지난 메시지를 선택하여 읽는다.
음성 메시지 모드로 전환한 후 메시지를 입력한다. 메시지를 확인해보면서 수정할 곳이 있어, 바로 전송하지 않고 다시 음성 메시지 입력에서 음성으로 메시지를 다시 입력한다.
5) 시나리오#5
채팅 탭에서 단체 채팅방을 찾아서 들어간다.
상대방이 보낸 지난 메시지들을 선택하여 읽는다.
6) 시나리오#6
친구 탭에서 음성모드로 전환한다. 친구를 찾은 후, 친구의 프로필에서 1:1 채팅방으로 들어간다. 음성 메시 지 모드로 전환한 후 메시지를 입력한다. 메시지를 확인해보면서 수정할 곳이 있어, 바로 전송하지 않고 다시 음성 메시지 입력에서 음성으로 메시지를 다시 입력한다.
연락처 전송 기능을 이용하여 친구 이름으로 연락처 검색 후 연락처를 음성 명령으로 전송한다.
4.3 미 구현 부분
• 음성 명령 기능은 친구 탭 또는 채팅방 탭에서 음성 모드 버튼을 눌러야 시작하고 끝낼 수 있다. 음성으로 음성 명령 기능을 시작하고 끝내는 것을 구현하지 않았다.
• 음성 명령 기능은 주로 채팅방 내에서 가장 많이 활용되고, 채팅방 외에서는 친구찾기, 채팅방 찾기, 채팅 방 개설에 활용된다.
• 이외의 기능들은 아직 음성명령 기능으로 사용할 수 없다.
• 선물하기, 이모티콘 전송, 송금하기 등 다른 기능들은 아직 음성 명령 기능으로는 불가하다.
5. 휴리스틱 평가 결과
5-1. 휴리스틱 평가 결과
각 시나리오에 대한 휴리스틱 평가 결과에 대한 요약은 다음과 같다. 문제점 이후 [H_no], [심각도], [수정 난이도]의 순서로 적는다. 평가에 사용된 번호는 어떤 휴리스틱에 저촉되는가를 표시한 것이고 다음 10가지 기준 중 하나이다.
[H1] : 피드백, [H2] : 실세계와 시스템간 매칭, [H3] : 사용자 주도권, [H4] : 일관성, [H5] : 실수 방지, [H6] : 직관적/인지적 기억, [H7] : 유연성과 사용 효율성, [H8] : 간결한 디자인, [H9] : 오류의 인지 및 회 복, [H10] : 충분한 도움말
휴리스틱번호 관찰사항 심각도 수정
난이도 해결책
1
작업의 최종 완료까지 얼마나 남았는
가를 짐작할 수 없다. 2 2 도움말 진행 과정을 보여주는 진행바 등 을 추가한다.
친구 찾기를 통해서 친구의 프로필 화 면으로 전환되었을 때 황당해하는 사
용자가 있다 2 2 친구 찾기와 채팅방 찾기가 다르다는 것
을 사전에 알 수 있도록 한다.
음성 명령으로 메시지를 보낼 시, 사용 자의 목소리가 입력되고 있는지를 확
인할 수 없다. 3 2
음성 입력이 되고 있을 시, 음성 모드 로 고 이미지를 마이크 모양으로 변경하여, 사용자가 말하고 있는 것을 주파로 보여 준다.
2
음성 명령 모드와 음성 메시지 입력 모
드를 구분하지 못하는 사용자가 많다. 3 3
음성 명령 모드로 전환하면 음성 명령 모드에 대한 도움말을 말해주고, 채팅방 에 입장하면 음성 메시지 입력 모드로 전환하는 방법을 도움말로 알려준다.
사진을 선택할 때 사진에는 제목이 없 기 때문에 무엇을 기준으로 음성으로
사진을 선택해야 하는지 기준이 없다. 3 3
3
하단의 음성 모드를 사용할 때 나타나 는 이미지가 카OO톡 내용을 가릴 우
려가 있다. 3 3 로고 이미지가 텍스트를 가릴 시, 자동
으로 불투명 조절이 가능하게 한다.
사용자가 앱에서 말하는 음성을 잘 듣 지 못했을 경우 다시 듣기 기능이 존재
하는지 안내가 없다. 4 3
방금 말한 음성메시지를 듣지 못했을 경 우, “다시 말해줘”라는 음성 명령을 통 해 다시 음성 메시지를 들을 수 있도록 기능을 추가한다.
물음표, 느낌표 등의 특수기호를 음성
으로 입력할 수 없다. 3 3 문장부호 버튼을 간단히 띄워 알맞은 문 장부호와 위치를 조절할 수 있게 한다.
4 음성 메시지를 입력할 때 특수문자는
음성으로 입력할 방법이 없다. 1 3 특수문자를 한글로 말하여 입력할 수 있 도록 한다.
5 친구 찾기와 채팅방 찾기를 구분하지
못하는 사용자가 많다. 2 2 친구탭과 채팅 탭을 구분할 수 있도록 하여, 결과를 다르다는 것을 보여준다.
6
사용자가 이전에 어떤 음성 명령을 했
는지 알 수 없다 2 2 사용자가 이전에 입력한 음성 명령을 볼
수 있는 메뉴를 따로 만든다.
이모티콘을 음성으로 입력해서 메시지
로 전송하기 어렵다 1 2 자주 사용하는 이모티콘에 특정 단어를 저장해두어 그 단어를 말하면 이모티콘 이 사용되도록 한다.
7
사진 선택하는 기능은 음성으로 하는 것보다 눈으로 사진을 확인하고 손으 로 사진을 클릭하여 선택하는 것이 더 편하다
3 2 사진 선택할 때는 음성 명령 기능 뿐만 아니라 손으로도 조작할 수 있도록 한 다.
특정 기능에서만 음성 명령 모드를 사
용할 수가 없다. 4 4 음성 모드 전환 버튼을 카OO톡 내 모 든 페이지에 삽입하여 언제든 on/off 할 수 있도록 한다.
8
안내 문구가 적힌 말풍선 배경을 반투 명하게 처리하여 텍스트가 잘 보이지
않는다 1 1 뒤의 요소를 가리더라도 말풍선을 완전
불투명하게 하여 안내 메시지가 잘 보이 게 한다.
숙련자에게는 음성 명령 모드가 시작 할 때 나오는 도움말 멘트가 지루하고
길다. 3 2 도입부의 도움말 멘트를 사용자가 임의
로 수정 가능할 수 있도록 구현한다.
9 음성으로 잘못 입력하거나, 잘못 클릭 했을 때 원하는 작업 수행과 관련 없는
다른 길로 빠지기 쉽다. 2 4 사용자의 발화를 다양하게 생각해놓고, 특정 키워드가 들어가면 동작할 수 있도 록 구현한다.
10
검색 결과에 대한 결과 이동 방법에 대
한 안내가 미흡하다. 3 2 결과 이동에 대한 음성 명령 문구를 안 내하거나 이동 버튼을 추가한다.
음성명령을 처음 사용해보는 사용자가 음성으로 메시지 보내기 기능을 실행 하고 싶을 때 어떤 식으로 명령하면 되 는지 어려워할 수 있다.
2 2
사용자가 음성명령 모드를 활성화한 뒤 일정 시간이 지났음에도 아무런 명령을 하지 않으면, 음성 명령에 대한 도움말 창을 띄워준다.
사진이 음성 명령만으로 갤러리에 바 로 저장 기능이 가능하다는 것을 사용
자가 바로 알 수 없다. 1 3 “사진을 갤러리에 저장할까요?” 등의 음성 가이드를 추가한다.
5-2. 기타 기능 개선
• 원하는 기능 이름으로 음성 명령을 해도 알아듣게 하기
- “사진 전송”, “메시지 입력”, “친구 찾기”, “1:1 채팅방 찾기”
• 사진 전송 기능에서 갤러리 사진 선택 시 손으로도 사진을 선택할 수 있도록 하기.
-> 몇번째 줄에 몇번째 사진 전송해줘 보다 사진을 눈으로 확인하고 선택하는 것이 더 편리할 것이라고 판 단
