DOI QR코드

DOI QR Code

A Study on the Kiosk UI Reflecting the Elderly's Characteristics

고령자의 특성을 반영한 패스트푸드점 키오스크 UI 연구

  • 홍승윤 (이화여자대학교 조형예술대학 디자인학부 영상디자인전공) ;
  • 최종훈 (이화여자대학교 조형예술대학 디자인학부 영상디자인전공)
  • Received : 2019.02.15
  • Accepted : 2019.03.20
  • Published : 2019.04.28

Abstract

This study was conducted to improve the use experience of elderly people in fast food kiosks which are actively utilizing 'un-tact' technology. First, the Kiosk design analysis criteria were discussed through literature research. Then, the UI screens of McDonald's, Lotteria and Burger King, which are currently serving kiosks in Korea, were divided into colors, layouts and buttons. Next, the usability evaluation and survey of the elderly revealed problems with the interface design of the current kiosk. As a result, older people do not recognize buttons without an outline as buttons, and errors occur when layout changes or when viewing is complicated. In addition, horizontal navigation and vertical layout menus were error-free, and the design of buttons was error-free with the same color for the same function. Research shows that the Kiosk UI design is preferred by older people. First, buttons in the form of outline or solid are recommended. Second, vertical binding of buttons combined with images and text is recommended. Third, the screen layout should be consistent with the direction of view flow and manipulation, and should avoid increasing the number of menus and information. Fourth, page navigation is recommended in horizontal form and menu arrangement is vertical form. Finally, buttons that perform the same function are efficient for buttons to use the same color, and for different functions, applying a complementary colors can reduce confusion.

본 연구는 최근 확산되고 있는 언택트 서비스의 대표 사례인 패스트푸드점의 키오스크를 대상으로 고령자의 사용경험 향상을 위한 연구를 수행하였다. 먼저 문헌 연구를 통해 키오스크 디자인 분석 기준에 대해 고찰하고 현재 우리나라 패스트푸드점 중 키오스크가 제공되고 있는 맥도날드, 롯데리아, 버거킹의 햄버거 구매 UI 화면을 컬러, 레이아웃, 버튼으로 나누어 분석하였다. 그 다음 고령자들을 대상으로 사용성 평가와 설문을 통해 현 키오스크의 인터페이스 디자인 문제점을 발견하였다. 그 결과 고령자들은 아웃라인이 없는 버튼을 버튼으로 인지하지 못한다는 점, 화면의 레이아웃이 변하거나 시선이 흐름이 복잡하면 오류가 발생하는 점이 발견되었다. 또한, 가로 형태의 내비게이션과 세로 형태 배열의 메뉴가 오류가 적었으며 버튼의 디자인은 같은 기능에 있어서 동일한 컬러인 것이 오류가 적었다. 연구 결과 고령자들이 선호하는 키오스크 UI 디자인은 다음과 같다. 첫째, 아웃라인 또는 솔리드 형태의 버튼이 권장된다. 둘째, 이미지와 텍스트가 결합된 버튼의 세로 결합 형태가 권장된다. 셋째, 화면 레이아웃에 있어서는 시선 흐름과 조작의 방향이 일관성이 있어야 하며, 메뉴 수와 안내 정보가 증가하는 것을 피해야 한다. 넷째, 페이지 내비게이션은 가로 형태가, 메뉴 배열은 세로 형태가 권장된다. 마지막으로 버튼은 동일한 기능을 수행하는 버튼은 동일한 컬러를 사용하는 것이 효율적이고, 서로 다른 기능인 경우 보색 관계의 컬러를 적용하는 것이 혼란을 줄일 수 있을 것으로 연구결과가 도출되었다.

Keywords

CCTHCV_2019_v19n4_556_f0001.png 이미지

그림 1. 맥도날드 키오스크의 GUI

CCTHCV_2019_v19n4_556_f0002.png 이미지

그림 2. 버거킹 키오스크의 GUI

CCTHCV_2019_v19n4_556_f0003.png 이미지

그림 3. 롯데리아 키오스크의 GUI

CCTHCV_2019_v19n4_556_f0004.png 이미지

그림 4. 키오스크의 메뉴 버튼

CCTHCV_2019_v19n4_556_f0005.png 이미지

그림 5. 맥도날드와 롯데리아의 메뉴 선택 인터페이스

CCTHCV_2019_v19n4_556_f0006.png 이미지

그림 6. 맥도날드와 버거킹의 레이아웃

표 1. 키오스크 버튼 디자인 기본요소

CCTHCV_2019_v19n4_556_t0001.png 이미지

표 2. 키오스크 디자인 분석 기준

CCTHCV_2019_v19n4_556_t0002.png 이미지

표 3. 키오스크 UI요소 비교

CCTHCV_2019_v19n4_556_t0003.png 이미지

표 4. 고령자의 기준

CCTHCV_2019_v19n4_556_t0004.png 이미지

표 5. 피실험자 사전 인터뷰 내용

CCTHCV_2019_v19n4_556_t0005.png 이미지

표 6. 키오스크 오류 발생 내용

CCTHCV_2019_v19n4_556_t0006.png 이미지

표 7. 버튼 분류

CCTHCV_2019_v19n4_556_t0007.png 이미지

References

  1. 김난도, 트렌드 코리아 2018(10주년 특별판) 서울대 소비트렌드분석센터의2018 전망, 미래의 창, 2017
  2. https://www.bloter.net/archives/279443, 2018.12.15.
  3. https://news.joins.com/article/23165162, 2018.12.10.
  4. 임병우, 조동희, 조용재, "촉각적 인터랙션을 활용한 유희적 키오스크 인터페이스 디자인," 한국콘텐츠학회논문지, 제8권, 제5호, pp.155-164, 2008. https://doi.org/10.5392/JKCA.2008.8.5.155
  5. http://www.womennews.co.kr/news/articleView.html?idxno=112146, 2018.12.17.
  6. http://m.mcdonalds.co.kr/me/kor/main/main.do, 2018.12.10.
  7. 박은영, "효과적인 인터렉티브를 위한 키오스크 인터페이스디자인 연구," 디지털디자인학연구, 제6권, 제2호, pp.485-493, 2006.
  8. https://www.huffingtonpost.kr/entry/story_kr_ 5b67ab6be4b0de86f4a2b4d1, 2018.11.30.
  9. 마주영, 키오스크 인터페이스 (GUI)디자인에서 버튼의 시각적 요소의 만족도에 관한 연구, 이화여자대학교, 석사학위논문, p.13, 2009.
  10. 채호병, 김성훈, "키오스크의 타일구조 인터페이스에 관한 연구," 한국디자인문화학회지, 제19권, 제1호, pp.429-436, 2013.
  11. 노주환, 사용하기 쉬운 웹 사이트, 비비컴, 2003.