UI/UX 설계
인터랙티브 프로토타입 (Interactive
Prototype)
[노년층을 위한 식당 키오스크 개선]
문서 정보 : 페이퍼 프로토타입 테스트 (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. 인터페이스 설계 변경
변경된 인터페이스 변경사항
∙ 노년층이 현재 진행 상황을 알지 못해 피로도를 느끼는 것을 파악하고 상단에 진행 상황을 나타내었다.
∙ 메뉴는 음식과 함께 가나다 순으로 정렬하여 나타내었다.
∙ 한 화면에 많은 정보가 있을 경우 정보파악에 어려움을 느끼는 것을 파악하고 장바구니에도 화살표 기능을 추가하여 음식을 많이 주문하 였을 경우 화살표로 이동할 수 있도록 하였다.
∙ 삭제 기능을 추가하여 음식을 바로 삭제할 수 있도록 하였다.
∙ 장바구니라는 글씨를 명시하였다.
∙ 주문확인, 결제 단계에서 최종 금액을 표시하였다.
∙ 한 화면에 많은 정보가 있을 경우 정보파악에 어려움을 느끼는 것을 파악하고 주문 확인 창에도 화살표 기능을 추가하여 음식을 많이 주문 하였을 경우 화살표로 이동할 수 있도록 하였다. 최대 6가지의 메뉴 만 나타날 수 있도록 하였다.
3. 대표작업 시나리오
3.1 인터페이스를 평가하기 위한 대표작업 4 가지 1 원하는 음식을 1 인분 선택하여 주문한다.
2 서로 다른 음식 2 종류의 음식을 선택하여 주문한다.
3 동일한 음식을 2 인분 주문한다.
4 결제 이전에 주문 음식을 변경한 뒤 다시 주문한다.
3.2 각 시나리오별 작업지시서 및 스토리보드
1) 첫 번째 시나리오 : 원하는 음식을 1 인분 선택하여 주문한다.
1 시나리오(정제된 시나리오)
백한섭은 디지털 기기와 친숙하여 키오스크 사용 경험도 많고 능숙도가 높다. 그는 처음 가보는 식 당에 직원들과 함께 갔다. 직원들은 면종류의 음식을 원했고, 백한섭은 면종류의 음식을 10인분 주문하려 한다. 처음 가보는 식당이라 낯선 메뉴가 많았고, 그는 고민하다가 간편 모드로 음식을 주문하기로 했다. 다양한 종류의 세트메뉴가 있었고, 따뜻한 국수와 오렌지 주스가 들어있는 세트 메뉴가 있어 총 10인분을 장바구니에 담았다. 그 때 한 직원이 차가운 국수를 먹기를 원했고, 백한 섭은 따뜻한 국수 세트메뉴 수량을 9로 변경한 뒤, 차가운 국수 세트메뉴를 하나 추가했다. 최종 적으로 장바구니에 들어있는 메뉴와 수량을 확인한 뒤, 백한섭은 카드로 결제를 진행하여 주문을 완료한다.
2 스토리보드
메뉴 선택 메뉴 확인 및 결제
2) 두 번째 시나리오 : 서로 다른 음식 2 종류의 음식을 선택하여 주문한다
1 상세 시나리오신일구는 국수 종류의 음식이 먹고 싶어서 집 앞 음식점에 갔다. 그는 사내 식당에서 키오스크를 본 적이 있었지만, 사용하기 불편해서 직원에게 직접 주문을 하곤 했었다. 하지만 그가 간 음식점 에서는 키오스크만 있고 직원이 보이지 않았다. 메뉴가 낯설었던 그는 간편 모드로 음식을 주문한 다. 다양한 세트 메뉴 중 그는 국수와 만두가 결합된 국만정식을 먹기로 결정했다. 그는 국만정식 1인분을 선택하고 카드로 결제한다. 결제를 하기 직전, 아들이 자신이 있는 음식점으로 온다는 전 화를 받는다. 그는 이전 단계로 돌아가 자신이 시켰던 것과 같은 국만정식을 1인분 더 추가한다.
최종 금액과 주문 내역을 다시 한 번 확인하고 카드로 결제를 진행한다.
2 스토리보드
메뉴 선택 주문 변경하기 메뉴 확인 및 결제
3) 세 번째 시나리오 : 동일한 음식을 2 인분 주문한다.
1 상세 시나리오
신일구는 가족들과 함께 외식을 하러 나왔다. 그가 간 식당에서는 키오스크로 주문을 받고 있었다.
신일구는 평소 키오스크를 사용할 엄두가 나지 않아 키오스크가 있는 식당은 가지 않았다. 하지만 오늘은 가족들과 함께 있으니 키오스크를 사용하는 모습을 보여주고 싶었다. 그가 가족들에게 자 신이 음식을 주문하겠다고 말했고, 가족들은 아무거나 먹고 싶다고 했다. 신일구는 간편 모드로 음식을 주문한다. 손자를 위한 어린이 정식과 자식 부부를 위한 국수나무 돈가스 세트 2개, 그리 고 자신이 먹을 김치나베세트를 장바구니에 담았다. 장바구니 화살표를 넘기면서 장바구니에 담 긴 메뉴와 수량을 확인하고 다음 단계로 넘어간다. 최종 금액과 주문 내역을 다시 한 번 확인하고 카드로 결제를 진행한다. 그는 카드로 결제를 완료하고, 주문을 성공적으로 수행했다.
2 스토리보드
메뉴 선택 메뉴 확인 및 결제
4) 네 번째 시나리오 : 결제 이전에 주문 음식을 변경한 뒤 다시 주문한다.
① 상세 시나리오
김일자는 키오스크에 익숙해서 친구들의 주문을 맡아서 하곤 한다. 날씨가 좋은 어느 날, 친구들과 새로 오픈한 베트남 음식점에 갔다. 친구들은 베트남 음식점에 가 본 적이 없기 때문에 김일자에게 알아서 맛있는 음식을 시켜달라고 부탁한다. 김일자는 간편모드로 음식을 주문한다. 세트메뉴 중 에서 잠시 고민하던 김일자는 뜨끈우동정식 세트메뉴로 통일해서 음식을 시키기로 결심한다. 해당 음식을 5개 주문하고 카드로 결제하려는데, 친구들이 다양한 음식을 먹고 싶다고 한다. 김일자는 이전 단계로 돌아가서 뜨끈우동정식 세트메뉴를 1개로 변경하고 가격을 보면서 메뉴를 고른다. 그 녀는 국치정식, 국만정식, 힘찬정식, 돈가스 정식을 각각 1개씩 선택한다. 장바구니 화살표를 넘 기면서 장바구니에 담긴 메뉴와 수량을 확인하고 다음 단계로 넘어간다. 최종 금액과 주문 내역을 다시 한 번 확인하고 결제를 진행한다. 이후 김일자는 카드로 음식을 결제하여 음식을 주문한다.
② 스토리보드
메뉴 선택 주문 변경하기 메뉴 확인 및 결제
4. Hi-fi 프로토타입 설명
4.1 작성 도구 및 환경
피그마를 이용하여 Hi-fi 프로토타입을 구현하였다. 기존에 제작하였던 low-fi 프로토타 입을 바탕으로 화면을 구상하였고, 사용자 테스트 과정에서 찾은 문제점들을 반영하여 일 부 수정하였다.
4.2 프로토타입 개요
① 주문하기
가로, 세로 비율이 2:3 인 비율의 하얀색 프레임으로 키오스크를 구상하였다. 버튼은 회 색, 초록색 계열의 색으로 구성하였고 메뉴 삭제 버튼만 빨간색으로 표현하였다. 상단에 메뉴 이미지, 하단에 메뉴명을 함께 첨부하여 메뉴를 표현하였다. 하단에는 선으로 장바구 니 영역을 구분짓고 장바구니 라는 글씨를 나타내었다.
② 주문 변경하기
이 때 수량을 변경하는 +,-는 동일한 색의 버튼으로, 메뉴를 삭제하는 X 버튼만 빨간색으 로 강조하였다.
③ 결제하기
회색의 프레임 영역에 주문 내역이 나타날 수 있도록 하였고 이 때 메뉴 이미지와 메뉴명, 가격을 글씨로 명시하였다. 하단에는 카드 투입구 위치를 알려주는 화살표를 넣었다.
4.3 미 구현 부분
Hi-fi 프로토타입에서 카드 단말기를 설치할 수 없다. 따라서 사용자가 Hi-fi 프로토타입
을 테스트할 때 “오즈의 마법사” 기법을 통해 카드를 투입하는 카드 단말기가 있다고 가정
해야 할 것이다.
5. 휴리스틱 평가 결과
번호 사용성 침해 사항 휴리스틱 항목 중요도 난이도
1 결제 안내 영상 로딩이 늦어질 때 진행바를 제공하지 않는다. H1 피드백 1 1 2 결제 시 카드 앞뒷면 구분을 하고 투입구에 넣어야 한다. H1 피드백 4 2
3 장바구니 영역이 일반 사각형 모양으로 현실 세계의 장바구니 모양
과 다르다. H2 매핑 1 0
4 장바구니를 초기화하는 버튼이 없다. H3 사용자
주도권 3 2
5 처음단계로 돌아가는 홈 버튼이 없다. H3 사용자
주도권 2 1
6 결제를 진행하는 단계에서 이전 단계로 돌아갈 수 없다. H3 사용자
주도권 4 1
7 메뉴 수량에 따라서 화살표가 보일 때도 있고 보이지 않을 때도 있
다. H4 일관성 1 1
8 장바구니에서 아무것도 선택하지 않았을 때 주문내역이 없다는 알
림을 주지 않는다. H5 실수방지 2 2
9 수량 변경 시 +,-를 클릭했을 때 변경 사항을 직관적으로 알기 어렵
다. H6 직관 2 3
10 일반모드와 간편모드의 차이점을 인지하지 못한다. H6 직관 1 0 11 메뉴 클릭 시 장바구니에 메뉴가 담기는 것을 인지하지 못한다. H6 직관 3 2 12 버튼을 터치해야 한다는 사실을 인지하지 못한다. H7 유연성 3 1
13 메뉴판을 이동할 수 있는 화살표인지, 장바구니를 이동할 수 있는
화살표인지 파악이 어렵다. H7 유연성 2 2
14 메뉴명, 금액의 글자가 작고 동일한 폰트로 되어 있어 파악이 쉽지 않다.
H8 간결한
디자인 1 0
15 이전, 다음 단계로 넘어갈 때 다시 확인하는 과정이 부족하다. H9 오류인지/
회복 3 1
16 메뉴 삭제를 눌렀을 때 다시 한 번 확인하는 과정이 필요하다. H9 오류인지/
회복 3 1
17 결제를 하고 주문이 완료되었음을 나타내는 설명이 부족하다. H10 충분한 도
움말 3 1
18 간편 모드 선택 시 도움말을 제공하지 않는다. H10 충분한 도
움말 1 1
19 오류가 발생했을 때 사용자가 스스로 오류를 해결할 수 있는 도움말 기능이 없다.
H10 충분한 도
움말 4 2
20 어려움이 생겨 사람의 도움을 필요로 할 때 직원을 호출할 수 있는 기능이 없다.
H10 충분한 도
움말 3 2
