NH투자증권 X NI Lab
iOS 위젯 및 워치 앱 디자인
iOS 위젯 및 워치 앱 디자인
MembersWooseok Kim, Minha Lee, Yunjae Choi, Nayeong Kim, Prof. Sangsu Lee
RoleProject Manager
Main ContributionResearch, Exploration, Ideation, UI Design
Period2020.09.18 - 2021.01.29
OVERVIEW
2020년,
애플은 iOS14 업데이트에서 새로운 위젯을 소개했습니다.
또, 애플은 워치 시리즈도 꾸준히 발표하고 있습니다.
MTS 서비스는 어떤 위젯과 워치 앱을 사용자에게 제공할 수 있을지, 어떤 기능을 제공하는 것이 효과적일지 고민했습니다.
애플은 iOS14 업데이트에서 새로운 위젯을 소개했습니다.
또, 애플은 워치 시리즈도 꾸준히 발표하고 있습니다.
MTS 서비스는 어떤 위젯과 워치 앱을 사용자에게 제공할 수 있을지, 어떤 기능을 제공하는 것이 효과적일지 고민했습니다.
Main Question
사용자들은 위젯과 워치 앱을 어떻게 사용하고 있을까?
위젯과 워치 앱은 겉보기에 비슷해 보이는데 공통점과 차이점은 무엇일까?
MTS의 위젯과 워치 앱은 사용자에게 어떤 기능을 제공해야 할까?
위젯과 워치 앱은 겉보기에 비슷해 보이는데 공통점과 차이점은 무엇일까?
MTS의 위젯과 워치 앱은 사용자에게 어떤 기능을 제공해야 할까?
Process
RESEARCHEXPLORATIONIDEATIONUI DESIGN
RESEARCH
디자인 방향성 확립을 위해,
셀프 유저스터디와 경쟁사 분석을 바탕으로 새로워진 iOS 14 위젯의 특징과 애플 워치의 특징을 분석했습니다.
셀프 유저스터디와 경쟁사 분석을 바탕으로 새로워진 iOS 14 위젯의 특징과 애플 워치의 특징을 분석했습니다.
iOS 위젯 발견점
애플 워치 발견점
EXPLORATION
1.
위젯과 워치 앱은 화면 크기도 비슷한데,
같은 방향으로 디자인하면 안될까?
위젯과 워치 앱은 화면 크기도 비슷한데,
같은 방향으로 디자인하면 안될까?
위젯과 워치는
사용자와의 상호작용 형태가 다릅니다.
사용자와의 상호작용 형태가 다릅니다.
위젯과 워치는 사용자의 개인화를 지원하며 서비스 사용을 보조하고, 높은 접근성을 장점으로 갖는다는 공통점이 있습니다. 하지만 위젯과 워치는 사용자와 상호작용하는 물리적 위치가 다르며, 상호작용의 수단도 다릅니다. 위젯은 휴대폰의 홈 화면에서 사용자의 서비스 사용 의도에 관계없이 일시적으로 정보를 제공하지만, 워치 앱은 사용자의 직접적인 니즈를 바탕으로 상호작용합니다.
iOS14 위젯
직접적인 상호작용
앱의 범위를 벗어나지 않는 앱의 일부분으로서 기능
사용자의 접근 노력 없이도 정보 제공 가능
애플 워치 앱
새로운 방식의 상호작용
모바일 앱과는 독립적인 새로운 워치용 앱
사용자가 정보를 원할 때 정보 제공 (컴플리케이션 제외)
2.
그렇다면 위젯과 워치 앱을
각각 어떻게 디자인해야 하는가?
그렇다면 위젯과 워치 앱을
각각 어떻게 디자인해야 하는가?
위젯과 워치의 역할을 정의하고, 공통점과 차이점에 유의하며 디자인 원칙을 세웠습니다.
iOS14 위젯
수시로 가볍게 마주하는 서비스의 인사
위젯은 사용자가 서비스를 사용할 의도가 없을 때에도, 홈 화면에서 수시로 사용자에게 정보를 제공합니다. 이러한 위젯의 인사를 바탕으로 사용자는 인사만 하고 지나갈 수도, 위젯을 터치해 서비스와 추가적인 이야기를 나눌 수도 있습니다.
iOS14 위젯 디자인 원칙
스마트폰 서비스의 범위를 벗어나는 기능을 제공하지 말 것.
업데이트 시점에 유의하며 정확한 정보를 제공할 것.
사용자화가 가능하도록 여러가지 기능이나 형태를 함께 제공할 것.
개인화 요소를 고려하여 정보를 제공할 것.
애플 워치 앱
언제나 내곁에 있는 준비된 작은 비서
워치 앱은 내 손목 위에서 언제나 나를 기다리고 있습니다. 휴대폰 앱보다 훨씬 빠르고 간편한 접근성을 바탕으로 알림을 제공해주기도 하며, 사용자를 빠르게 서비스로 끌어들입니다.
워치 앱 디자인 원칙
워치의 물리적 특성과 사용자의 컨텍스트를 고려할 것.
사용자의 순간적인 니즈에 스스로 대응할 수 있도록 할 것.
사용자를 너무 오래 붙잡지 말 것.
개인화 요소를 고려하여 정보를 제공할 것.
DESIGN RESULT
아이디에이션과 토론을 거쳐 4가지의 위젯 디자인과 1가지의 워치 앱 디자인을 제안했습니다.
미처 확인하지
못한 주식까지
못한 주식까지
DIRECTION
종목 검색, 관심 등록, 매매 등 사용자의 지난 투자 활동 기록을 현재가와 함께 제공합니다.
사용자들은 ‘아 그때 살걸’ 또는 ‘조금만 기다렸다 팔걸’, ‘아 이때 정말 잘했구나’ 하고 지난 투자활동을 돌아볼 수 있습니다. 이를 바탕으로 사용자는 자신의 매매 전략을 수정하거나 새로운 전략을 세울 수 있습니다.
사용자들의 자산 변화를 직접적으로 전달해 사용자를 강하게 이끌 수도 있습니다.
사용자가 보유 종목 또는 관심 종목의 확인하지 않은 주요 이슈를 알려줄 수 있습니다.
나무 키우기
자산 키우기
자산 키우기
DIRECTION
NH투자증권의 MTS 이름인 ‘나무’ 를 활용한 컨셉입니다. 사용자는 나무의 형태로 자산의 변화를 확인할 수 있습니다.
Slow Interaction에 초점을 맞춰 사용자가 자신의 자산의 변화를 장기적으로 지켜볼 수 있도록 합니다. 스큐어모피즘을 따라 마치 아이폰 홈 화면에 화분을 심은 것 처럼 표현할 수도 있습니다.
나무를 사용해 자산을 추상화해서 표현하면 휴대폰을 보다가 나의 자산이 주변 사람들에게 노출되는 것을 방지할 수 있습니다.
나무 위젯은 시즌제로 운영할 수도 있습니다. 시즌별로 새로운 나무를 제공하고 나무를 모을 수 있도록 합니다.
위젯을
내맘대로
내맘대로
DIRECTION
실시간 업데이트가 불가능하다는 위젯의 특성을 고려하여 주가의 업데이트 시간을 함께 제공합니다.
iOS 위젯은 실시간 업데이트가 불가능합니다. 따라서 현재가를 보여주는 것은 사용자를 혼란시킬 수도 있습니다. 따라서 사용자에게 시간에 따른 주가와 거래량, 오늘의 추이를 제공하는 것을 목표로 합니다.
사용자가 홈 화면의 분위기에 맞게 위젯의 사용된 색상을 변경할 수 있도록 합니다.
보여질 리스트의 종류(관심 종목, 보유 종목)도 사용자가 개인화할 수 있도록 지원합니다.
업무 중에도
열지 않아도
열지 않아도
DIRECTION
바쁜 사용자를 위해 예약 매매 현황을 간편하게 확인할 수 있도록 예약 매매 현황을 차트 그래프와 함께 제공합니다.
대량의 주식을 매매하거나 개장시간에 업무를 보느라 바빠 예약 매매를 자주 사용하는 사용자들을 위한 위젯입니다. 주가의 움직임과 예약 금액을 함께 표시해 사용자가 앱을 열지 않고도 상황을 파악하고 판단할 수 있도록 돕습니다.
기능을 자주 사용하는 사용자를 위한 위젯이므로, 표시할 종목을 쉽게 변경하거나 추가할 수 있게 합니다.
한눈에
직관적으로
그리드뷰 UI를 활용한직관적으로
직관적인 등락률 확인
DIRECTION
애플 워치 자체의 그리드 뷰 UI를 활용해 한눈에 여러 종목의 주가를 직관적으로 확인할 수 있도록 합니다.
애플 워치의 홈 화면과 같은 방식의 뷰를 사용해 애플 워치 홈 화면과의 연결성을 높일 수 있습니다. 주가 변동률의 절댓값이 큰 종목을 중앙에 배치하여 앱 진입시 전체 종목의 변동 추이를 한눈에 파악할 수 있습니다.
DETAILS
디지털 크라운(휠) 인터랙션
그리드 뷰 화면에서 디지털 크라운을 돌리면 가운데 있는 종목이 확대되며 주가가 표시됩니다. 계속 확대하면 종목의 세부 페이지로 이동할 수 있습니다. 종목 페이지에서 디지털 크라운을 돌리면 차트의 스케일을 조절할 수 있습니다. 좁은 화면에서도 차트를 자유롭게 확대하고 이동할 수 있습니다.
최소한의 정보만 제공하는 워치 앱
워치를 오래 사용하는 것은 사용자의 팔과 목에 육체적 부담을 줍니다. 따라서 종목에 대한 모든 정보를 제공하기보다 투자 대응을 하는데 필요한 주가, 거래량, 뉴스 및 공시 정보를 위주로 제공합니다.
다른 프로젝트