더이상 우리는 온라인 슬롯 폰을 활용할 때키패드나 화살표 버튼을 사용해 메뉴를 선택하지 않습니다.
당연히 PC에서 쓰는 마우스나 키보드와 같은 보조 도구를 사용하지도 않습니다.
불과 수년전만 해도 당연했던 온라인 슬롯과 사용자간의 거리는 터치스크린 기술의 발전을 통해서 말그대로 보이는것을 직접 손으로 누르는 '직관성'을 띄게 되었습니다.
뭐 이렇게 사용하시는 분이 있을 수도 있지요 (출처gadgetify.com)
PC의 조작처럼 키보드 또는 마우스를 활용하지 않고 옛 모바일 디바이스 처럼 키패드 등을 활용하지 않는 '손가락으로 온라인 슬롯 누르는 시대' 에는 그에 걸맞는 사용자 조작이 분명히 존재하며 그에 꼭맞는 사용자 경험을 위해서는 적지않은 연구가 필요합니다.
꼭 필요한 디자인을 위해서
제가 속해있는 UX TF는 티몬 앱과 고객과의 접점에서 더 나은 경험을 드리기 위해 UX연구과제를 선정하고 해당 과제를 발전시켜 티몬 디자인 조직 현업에 깊은 인사이트를 제공하거나 디자인과 개발의 효율화 고도화를 위해 리서치, 디자인, 목업, 스타일 가이드등을 제작하고 있습니다.
오늘 제 글은 최근 연구중인 "온라인 슬롯 사용자 조작연구" 과제를 위해제가 조사한 조작 편의성이 우수한앱을 공유하려고 합니다.아마, 저와 같은 UX 디자인을 하고 있지 않으셔도,평소 온라인 슬롯 앱을 사용하시고 계신다면 재미있게 볼 수 있는 주제이실 거예요.
사례를 보여 드리기 전에 먼저 온라인 슬롯에서 사용되는 터치 제스처 용어를 정리하여여러분의 이해를 돕고자 해요.
온라인 슬롯 앱에서
‘샥! 쭉~ 딱’ 움직이라고?
“앱홈에서 이렇게샥샥 넘기고쭉 내려서요, 자 여길딱 클릭하면이게푝! 나오면 어떨까요?”
온라인 슬롯 앱 제작 관련 종사자라면흔히 들어본 문장 일거예요.
이처럼제스처와 상태 용어를 혼재하여 사용하거나 서로 다른 용어로오해를 일으키는경우가 많은데요 결국 이러한 커뮤니케이션은효율이나 퀄리티에 영향을 끼치게 됩니다.
티몬에서는 UI기획자와 디자이너, 개발자 간의 원활한 커뮤니케이션을 위해 아래와 같이 정의 하고 있습니다.
티몬 터치 제스쳐 정의
티몬에서는 '클릭, 샥, 쭉, 딱, '대신위의 온라인 슬롯과 같이 Tap, Swipe, Scroll, Drag로정의합니다.
- Tap : 온라인 슬롯 선택
- swipe : 온라인 슬롯 좌우로 움직여 항목을 이동
- Scroll: 온라인 슬롯 상하로 올리거나 내리는 행동
- Drag: tap 한 상태에서 온라인 슬롯 끌음
위의 제스처들은 이제 온라인 슬롯에서 가장 친숙하고 기본적인 행동 조작법인데요, 지금부터는 이 제스처들이 잘 적용된 앱 서비스를 소개해 드릴게요.
한방에OK? OK!
스크롤이 잘 구현된 앱
#Booking Now
부킹 나우는실시간 호텔 예약 서비스로서비스 흐름과 사용 조작이 자연스럽게 연결되는 앱이에요.
홈리스트에서 상세온라인 슬롯 스크롤로 연결하였고,이 단 한 번의 스크롤링으로호텔 정보와, 숙박정보, 예약이 가능한 점이 돋보입니다.
위치기반 서비스로 지도를 중심으로 리스트를 제공하며 리스트의 온라인 슬롯핑으로 지도의 핀도 함께 이동되는 것도 장점이라고 생각해요.
booking now app
#Curatum
Curatum은하루에 하나씩 상품을 추천해주는 남성 럭셔리 이커머스 플랫폼 서비스예요.
스크롤링으로상품정보와 구매, 브랜드 정보, 배송정보 등의 섹션이 부드럽게연결되는 장점이 있고
이 앱에서는딜 상세페이지에서 고정된듯한 주문 버튼이 스크롤이 진행되며 상단으로 사라짐과 동시에 하단에 자연스럽게 등장하며,기타 추가 정보에 접근하기 위해새로운 온라인 슬롯으로 전환 할 때에도 스크롤로 유도하여사용자의 행위의 흐름이 끊기지 않는점이 엄청난 장점입니다.
레이아웃이 크게 달라 보이지 않습니다만 실제로 활용해 보면 기존의 스크롤과는 완전히 다른, 하지만 매우 자연스러운 경험을 제공합니다.
알리익스프레스의 딜 상세 온라인 슬롯
또한 메인 홈에서 스크롤링 중 카테고리 메뉴가 상단 탭으로 고정되어 온라인 슬롯핑 되면서자연스럽게카테고리로 진입시키는 것을 볼 수 있어요.전반적으로 알리익스프레스는 사용자의 서비스 내에서의 동선을 자연스럽게 그리고 끊임없이 연결되는것에 심혈을 기울인것으로 보입니다.
알리익스프레스의 메인 온라인 슬롯중 카테고리 등장 온라인 슬롯
#현대카드웨더
제가 요즘 매일 보는 날씨 정보 서비스인 현대카드 웨더 앱이에요.
제공되는 정보는 물론이고,감각적인 색감에 감성을 터치하는 섬세한액션 때문에 애정 해요.
이 앱도스크롤링으로상세정보및하단의 테마 변경까지 주요 콘텐츠 전체가 자연스럽게 연결되고 있어요.
현대카드 웨더 app_1
그리고 하단테마 변경에서는 온라인 슬롯핑을 사용하며 테마 메뉴 리스트를 볼 수 있게 연결되어 있어요.
저는 날씨가 안 좋은 날 테마를 변경하며 기분전환을 합니다.
현대카드 웨더 app_2
드래그&온라인 슬롯로
내가 내가 해!
다음은 드래그와 온라인 슬롯의 제스처를 활용한 사례를 보여드릴게요
#amazon
세계 최고의 이커머스 서비스 아마존이죠.
아마존 IOS에서는 제품 이미지를 드래그하여 카트에 담는 기능이 있는데요, 원하는제품을 직접 손으로 담아 넣는 재미를 경험할 수 있어요. 온라인 슬롯에서는 잘 활용하지 않는 PC시절의 드래그앤 드랍 기능을구현하여 쇼핑의 손맛(?)을 제공하는 감성터치라고 생각합니다.
amazon app_1
또한아마존에서는 제품 리스트를 온라인 슬롯 하여 카트에 담거나 나중에 보기 위해 보관하는 기능이 있어요.
온라인 슬롯 제스쳐는 모바일에 특화된 가장 간결하고 유용한 제스쳐 입니다. 쇼핑 앱에서 매우 잘 활용된 사례에요.
amazon app_2
#inbox
구글의 메일 앱인 인박스에서도 온라인 슬롯핑으로 받은 메일을 보관하거나 알림을 추가할 수 있어요.
메일 묶음도 한 번에 처리 가능하니 안쓸 수가 없지요.
inbox app
#navermusic
네이버 뮤직 서비는탭메뉴 간 이동이나 앨범 리스트 등 많은 부분을 온라인 슬롯핑으로 구현해왔는데요jamm에서도 역시#해시태그라는 가로형텍스트를온라인 슬롯핑으로 구성한 것을 볼 수 있어요.
주목할 부분은 가로로 긴 텍스트가 들어갈 수 밖에 없는 콘텐츠는 레이아웃 배치가 곤란한 상황이 발생할 수 있는데요.엄청난 길이로 길어질 수도 있는 해시태그를 가로 온라인 슬롯핑을 통해 적절하게 배치한 부분입니다. 글씨가 잘린상태 그대로가 자연스럽게 온라인 슬롯핑을 유도하게 됩니다.
naver music app
#Clashem
이 앱은 동영상 콘텐츠를 유저가 투표로 대결하는 서비스예요.
승패는 투표자의 온라인 슬롯액션으로 조작할 수 있어요. 아주 간단하지만 액션과 의도가 명료하고 색감까지 조화로와서 소개해 드려요.
Clashem app
연구과제를 진행하다 보면 과제 결과물을 도출해 내기까지 많은양의 사례조사가 이루어질 수 밖에 없는데요 그렇게 만나게 된 좋은 사례들을 블로그를 통해 자주 공유할 생각입니다.
