UI/UX 설계
페이퍼 프로토타입 테스트 (Paper Prototype
Test)
[노년층을 위한 식당 키오스크 개선]
문서 정보 : 페이퍼 프로토타입 테스트 (ver 1.0) 제출일 : 0000 년 00 월 00 일
팀 명 : 실버 메뉴
팀원 : 팀원 1, 팀원 2, 팀원 3
1. 문제 및 해결방안 개요
프로젝트명: 노년층을 위한 식당 키오스크 UI 개선
본 프로젝트는 시니어들도 사용하기 편리하도록 식당 키오스크 UI 를 개선하고자 한다.
1-1. 프로젝트의 목적
디지털정보격차 실태 보고서에 따르면 장•노년층 (만 55 세 이상)의 ‘생활 서비스 이용률’은 일 반 국민보다 현저히 낮다. 특히 최근 다양한 업종에 많이 보급되고 있는 대부분의 키오스크에서는 노년층을 고려하지 않은 인터페이스를 사용하였다. 따라서 노년층들에게는 키오스크의 진입 장벽 이 더욱 높게 느껴진다. 노년층은 메뉴의 용어를 파악하는데 어려움을 느끼고 키오스크 조작이 까 다로워 메뉴를 주문하다가 중도포기 하는 경우가 많다. 따라서 본 프로젝트에서는 노년층을 고려 한 새로운 인터페이스의 키오스크를 설계하여 노년층들이 키오스크에 대한 막연한 두려움으로 위 축되지 않고 원하는 메뉴를 쉽게 주문할 수 있도록 한다.
1-2 기존 인터페이스의 현황 및 문제점
1) 낯설고 어려운 메뉴 용어
키오스크에 표현되는 용어는 대부분 영어이거나 노년층에게 익숙하지 않은 용어인 경우가 많다.
메뉴 이해도가 낮을 때, 노년층은 음식을 주문하기 위해 메뉴를 보아도 해당 메뉴가 어떠한 음식인 지 정확히 파악하지 못한다. 이렇듯 익숙하지 않은 용어로 인해서, 메뉴들을 이해하고 원하는 메뉴 를 선택하는 데에 시간이 걸리게 되고, 뒷사람들의 눈치가 보여 노년층들은 더욱 심리적으로 위축 될 수밖에 없다.
2) 부담감을 느끼게 하는 많은 선택 단계
끝없이 나오는 메뉴판, 사이드 메뉴부터 음료, 크기, 포인트 적립 여부, 결제까지 많게는 10 단계
에 이르는 번거로움에 노인들은 끝까지 주문을 완료하지 못하고 중간에 포기하고 매장을 나오는 경 우가 많다. 반응 속도가 느린 노인들에겐 ‘선택 단계’가 많아질수록 심리적 초조함을 느끼게 되는 원인이 된다.
1-3. 본 프로젝트의 해결방안
1) 간소화된 세트메뉴 개념 활용
① 세트메뉴 설명을 통한 메뉴 이해도 증진
노인들을 위한 세트메뉴를 제공한다. 이 때 노인들이 메뉴가 정확히 어떤 음식인지 쉽게 파악할 수 있도록 세트메뉴에는 메뉴재료와 간단한 메뉴 설명을 제공한다. 이를 통해 노인들은 선택지가 단순화되어 메뉴를 선택할 때 고민을 덜고 어떠한 음식인지 정확히 파악하여 음식을 주문할 수 있 다.
② 세트 모드 ↔ 직접 선택 모드 간 자유로운 변경으로 자율성 제공
키오스크에 능숙한 노인들을 위해 세트 모드와 직접 선택 모드 두 가지 기능을 제공한다. 키오스
크에 능숙하지 않은 노인들은 세트 모드를 활용하여 업주가 추천하는 세트메뉴 기능을 제공받을 수
있고, 키오스크에 이미 능숙하여 원하는 메뉴를 주문하고 싶은 노인이라면 직접 선택 모드로 설정 하여 음식을 주문할 수 있다.
③ 업주의 자율적인 세트메뉴 구성으로 지점별 맞춤화
세트 메뉴가 고정적이지 않고 업주가 설정하는 것에 따라 바뀔 수 있도록 한다. 점주는 소비자의 의견을 반영하여 세트 메뉴를 구성할 수 있고, 노인들은 좀더 다양한 세트 메뉴를 선택할 수 있게 된다.
2) 조작에 따른 피드백 제공
여러 단계를 거쳐서 주문을 할 때 현재 진행 상태를 정확히 알지 못해 동일한 메뉴를 여러 번 선택
하는 경우도 빈번하다. 단계별 진행 상황을 한눈에 확인할 수 있는 UI 구성이 필요하다. 메뉴가 장
바구니에 담길 때마다 크고 선명한 애니메이션을 보여주는 방식으로 조작에 따른 피드백을 확실하
게 제공하여 주문 절차에 대한 모호함이 없도록 한다.
2. Low-fi 프로토타입 설명
2-1. 페이퍼 프로토타입 개요
전체구성
페이퍼 프로토타입은 키오스크와 비슷한 가로, 세로 비율로 구성되었고 실제 키오스크보다 작은 사이즈로 만들었다. 접착 종이를 이용해 화면 전환을 표현하였고, 화면 구분을 위한 선은 종이에 직접 그렸다. 버튼과 변경되는 수량은 포스트잇으로 구성하여 변경이 즉시 반영될 수 있도록 만 들었다.
간편모드 요소들
간편모드를 선택했을 때 진행되는 과정이다. 상단에 현재 진행 단계를 나타내었고 좌하단, 우하 단에 이전, 다음 단계로 넘어갈 수 있는 버튼을 포스트잇으로 표현하였다. 메뉴 선택을 진행할 때에는 포스트잇에 화살표로 표시하여 메뉴를 이동하면서 볼 수 있도록 하였다. 알림내역 역시 포스트잇으로 표현하였다.
일반모드 요소들
일반모드를 선택했을 때 진행되는 과정이다. 간편 모드와 비슷하게 포스트잇으로 메뉴판과 진행 상황을 표시하였다. 또한 옵션 선택과 포인트 적립과 같은 상황에서 입력해야 하는 버튼들도 종이 가운데에 포스트잇으로 표현하였다.
2-2. 시나리오별 페이퍼 프로토타입
시나리오 1: 면종류의 음식을 10 인분 주문
시나리오 2: 원하는 음식을 2 인분 주문
시나리오 3: 자식 부부, 손자, 자신이 먹을 음식 4 인분 주문
시나리오 4: 새우 카레 1 인분 주문을 취소하고 크림 카레 1 인분 주문
시나리오 5: 베트남 쌀국수 1 인분 주문, 이 때 고수 제외
시나리오 6: 중복되는 메뉴가 없도록 음식 5 인분 주문
3. 사용자 테스트 실험 및 결과
3-1. 참여자 및 인터뷰 환경
키오스크 사용이 익숙하지 않아 어려움을 느끼는 장노년층을 대상으로 인터뷰를 진행했다. 키오스크 친숙도 와 메뉴 친숙도에 따라 어려움을 느끼는 정도가 다르기 때문에 키오스크 사용 빈도가 5
회 미만, 5회 이상인사람으로 나누었고 메뉴 친숙도 역시 중, 하로 나누어 총 4 명의 참가자를 선정하였다.
인터뷰 대상자 성별/연령대(참고) 키오스크 사용빈도 메뉴친숙도
김명자
여/50 대
5회 이상중
장환
남/50대
5회 미만하
이정희 여/60 대
5회 미만중
강태일 남/60
대
5회 이상하
• 참여자 정보
• 인터뷰환경
이름 실험 장소 배치 상황
김명자 실험 대상자의 집 근처 카페 카페 테이블 위에 페이퍼 프로토타입을 배치한 후 진행 장환 실험 대상자의 집 근처 카페 카페 테이블 위에 페이퍼 프로토타입을 배치한 후 진행 이정희 적당한 소음이 있는 집근처 카페 카페 테이블 위에 페이퍼 프로토타입을 배치한 후 진행 강태일 실험 대상자의 집 테이블 위에 페이퍼 프로토타입을 배치한 후 진행
3-3. 진행 과정
4
명의 팀원이 함께 4 명의 실험 대상자를 만나 인터뷰를 진행하였다. 테스트 진행 및 과정 설명을 하는 사람
2명, 기록자 2 명으로 역할을 분배했다.
3- 4.
실 험
결과
① 시나리오1
키오스크: 5회 이상 메뉴: 중
- 일반 모드와 간편 모드의 차이점을 모름 - 세트 메뉴 구성을 알기를 원함
- 하단에 있는 기능 이동과 중앙에 있는 메뉴판 이동 버튼을 헷갈려함
키오스크: 5회 미만 메뉴: 하
- 이미지가 존재하지 않아 이름만으로 정확한 메뉴를 파악하기 어려움 - 메뉴 가격도 함께 보이기를 원함
- 일반 모드와 간편 모드의 차이점을 모름
역할 담당자
테스트 진행 및 설명 팀원1
관찰 기록 팀원2, 팀원3
키오스크: 5회 미만 메뉴: 중
- +, - 를 버튼을 인지하지 못하고 수량을 추가할 때 해당 메뉴를 계속 누름
- 메뉴를 한 번에 삭제하는 기능이 있었으면 좋겠음 - 메뉴 가격도 함께 나타내기를 원함
키오스크: 5회 이상
메뉴: 하 - 이미지가 존재하지 않아 이름만으로 정확한 메뉴를 파악하기 어려움 - 최종 가격을 확인하기를 원함
② 시나리오2
키오스크: 5회 이상 메뉴: 중
- 일반 모드와 간편 모드의 차이점을 모름
- +, - 의 의미를 파악하지 못함
- 세트 메뉴 중에서 원하는 음식이 없어 일반 모드로 돌아감
키오스크: 5회 미만
메뉴: 하 - 이미지가 존재하지 않아 이름만으로 정확한 메뉴를 파악하기 어려움 - 메뉴 가격도 함께 보이기를 원함
키오스크: 5회 미만 메뉴: 중
- 수량 1에서 – 로 됐을 때 메뉴가 삭제된다는 것을 알기 불편해함 - 실수를 했을 경우 이전 화면으로 돌아감
- 일반 모드와 간편 모드의 차이점을 모름
키오스크: 5회 이상 메뉴: 하
- 최종 가격을 확인하기를 원함 - 메뉴 가격도 함께 나타내기를 원함 - 일반 모드와 간편 모드의 차이점을 모름
③ 시나리오3 키오스크: 5회 이상
메뉴: 중 - 일반 모드와 간편 모드의 차이점을 모름
- 이미지가 존재하지 않아 이름만으로 정확한 메뉴를 파악하기 어려움 키오스크: 5회 미만
메뉴: 하 - 이미지가 존재하지 않아 이름만으로 정확한 메뉴를 파악하기 어려움 - 메뉴 가격도 함께 보이기를 원함
키오스크: 5회 미만
메뉴: 중 - 실수를 했을 경우 이전 화면으로 돌아감 키오스크: 5회 이상
메뉴: 하 - 최종 가격을 확인하기를 원함
- 수량 1에서 – 로 됐을 때 메뉴가 삭제된다는 것을 알기 불편해함
④ 시나리오4 키오스크: 5회 이상 메뉴: 중
- 일반 모드와 간편 모드의 차이점을 모름
- 이미지가 존재하지 않아 이름만으로 정확한 메뉴를 파악하기 어려움 - 가나다 순으로 정렬한다면 더 편리할 것 같다고 함
키오스크: 5회 미만 메뉴: 하
- 이미지가 존재하지 않아 이름만으로 정확한 메뉴를 파악하기 어려움 - 메뉴 가격도 함께 보이기를 원함
- 수량 1에서 – 로 됐을 때 메뉴가 삭제된다는 것을 알기 불편해함 키오스크: 5회 미만
메뉴: 중
- 포인트 적립은 일반 모드에만 있다는 것을 인지하지 못함
- 이미지가 존재하지 않아 이름만으로 정확한 메뉴를 파악하기 어려움 - 최종 가격을 확인하기를 원함
키오스크: 5회 이상 메뉴: 하
- 이미지가 존재하지 않아 이름만으로 정확한 메뉴를 파악하기 어려움 - 실수를 했을 경우 이전 화면으로 돌아감
- 최종 가격을 확인하기를 원함
⑤ 시나리오5 키오스크: 5회 이상 메뉴: 중
- 세트 메뉴 중에서 원하는 음식이 없어 일반 모드로 돌아감
- 실수를 했을 경우 실수만 수정하지 못하고 이전 화면으로 돌아가서 다시 작업을 수행 - 함최종 가격을 확인하기를 원함
키오스크: 5회 미만 메뉴: 하
- 이미지가 존재하지 않아 이름만으로 정확한 메뉴를 파악하기 어려움 - 메뉴 가격도 함께 보이기를 원함
- 포인트 적립은 일반 모드에만 있다는 것을 인지하지 못함 키오스크: 5회 미만
메뉴: 중 - 포인트 적립은 일반 모드에만 있다는 것을 인지하지 못함 키오스크: 5회 이상
메뉴: 하 - 최종 가격을 확인하기를 원함
⑥ 시나리오6 키오스크: 5회 이상 메뉴: 중
-
일반 모드와 간편 모드의 차이점을 모름
-세트 메뉴 구성을 알기를 원함
-
메뉴 가격도 함께 보이기를 원함
키오스크: 5회 미만메뉴: 하
-
세트 메뉴 중에서 원하는 음식이 없어 일반 모드로 돌아감
-메뉴 가격도 함께 보이기를 원함
-
최종 가격을 확인하기를 원함
키오스크: 5회 미만메뉴: 중 - +, - 를 버튼을 인지하지 못하고 수량을 추가할 때 해당 메뉴를 계속 누름 키오스크: 5회 이상
메뉴: 하 -
최종 가격을 확인하기를 원함
4. 해석 및 토론
사용자 테스트를 통해 제안한 사용자 인터페이스(페이퍼 프로토타입)의 문제점과 보완할 점을 파악할 수 있 다.
4-1. 중요도(심각도) 분류
기능 사용성 침해 사항 중요도 해결책
결제하기
결제 안내 영상 로딩이 늦어질 때 진행바를 제
공하지 않는다. 1 로딩이 3초 이상 늦어지면 모래시계를 보
여준다.
결제 시 카드 앞뒷면 구분을 하고 투입구에 넣
어야 한다. 4 카드 투입 애니메이션을 보여준다.
주문하기
장바구니 영역이 선으로만 구분되어 있어 장바
구니임을 파악하지 못한다. 1 장바구니라는 용어를 명시한다.
(이미 수정)
간편 모드 선택시 도움말을 제공하지 않는다. 1 간편 모드에 대한 설명을 해주는 버튼을 만 든다.
주문 수량에 따라 주문 확인 단계에서 한 화면
에 보이는 최대 수량이 달라진다. 1
한 화면에 보여지는 수량을 6개로 제한하 고 넘어갈 경우 화살표로 전환한다. (이미 수정)
메뉴판, 장바구니와 달리 메뉴 수량에 따라 주 문확인 시 나오는 창의 길이가 다르다. 1
메뉴판, 장바구니처럼 화살표로 화면 전환 을 할 수 있도록 한다.
(이미 수정)
장바구니에서 아무것도 선택하지 않았을 때 주 문내역이 없다는 알림을 주지 않는다. 2
주문 확인 페이지로 이동하기 전, 선택한 메뉴가 없다는 알림창을 띄운다. (이미 수 정)
일반모드와 간편모드의 차이점을 인지하지 못
한다. 1 간편모드를 클릭시 간단한 설명 알림창을
띄운다.
버튼을 터치해야 한다는 사실을 인지하지 못한
다. 3 주문 시작 전 버튼을 터치하는 애니메이션
을 제공한다.
전체 주문 과정에서 현재 얼마나 진행되었는지
알 수 없다. 1 상단에 진행 과정을 나타낸다.
(이미 수정) 취소 버튼이 따로 없고 수량 조절 버튼만 있어
서 개별 취소를 위해서 어떤 작업을 해아하는 지 알지 못한다.
3 메뉴 삭제 버튼을 따로 만든다.
(이미 수정)
주문변경
장바구니를 초기화하는 버튼이 없다. 3 초기화 버튼을 만든다.
처음단계로 돌아가는 홈 버튼이 없다. 2 ‘처음으로’ 라는 버튼을 만든다.
메뉴 삭제를 눌렀을 때 다시 한 번 확인하는 과
정이 필요하다. 3 메뉴 삭제 이전에 다시 한 번 확인하는 알
림창을 띄운다.
수량 변경 버튼과 메뉴 삭제 버튼의 색이 같아
서 혼동의 여지가 있다. 2 메뉴 삭제 버튼은 주의할 수 있도록 빨간색 으로 한다.
4-2. 토론
1
테스트를 통해 배운 것
직접 프로토타입을 만들어 사용자 테스트를 해본 결과, 완벽해보였던 프로토타입의 문제점들이 많다는 것 을 알았다. 기능을 이미 다 알고 있는 기획자의 입장에서는 당연한 흐름도 소비자는 어렵거나 한눈에 알아 보기 어려울 수 있고, 소비자의 입장을 더 고려해야 한다는 것을 알았다.
2
향후 수정 방향
노년층이 메뉴를 삭제할 때 단순히 메뉴 수량을 변경하는 것을 반복해서 클릭해야 하는 작업에 번거로움을 느끼는 것을 파악하고 메뉴 삭제 버튼을 별도로 추가하고 메뉴 수량 버튼과 다른 색으로 차별화를 하였다.
또한 한 화면에 많은 양의 정보가 들어가 있을 경우 정보를 파악하는데 피로감을 느낀다는 것을 파악하고
