#건강검진팀

# UI Patterns

UI Design Pattern

Jan 26서울대학교 융합과학기술대학원

1

2

사람들은어떻게얼굴도안보고글말을하게되었는가.

:안,면대면대화의역사

3

Indicator

안녕하세요. :-)

저는 분당 서울대학교 병원 건강도우미 “헬순이”입니다!

앞으로 저는 000씨의 건강한 매일을 위해서 노력할거에요.

저를 믿고 따라와 주실거죠?

당연하지! 잘 부탁해. 이게 뭐야?

헬순이

응답선택

대화 버블

D-7 am 10:00

messaging

- 시간에 따라 아래로 쌓이는 텍스트 - 두 사람 이상이 한 화면에(대화형) - 말풍선 - 왼쪽:상대, 오른쪽:나

old

new

meyou +

4

messaging_ PC통신 대화방: 대화형 UI

하이텔

old

new

me

you

5

윈도우 PC에서의 메신저 창은 대화형을 취했음. (버블은 X) 이후, 나와 너를 색으로 구분…! UX 센세이션!

나우누리 대화방

old

new

me

you

messaging_ PC통신 대화방: 대화형 UI

6

messaging_ PC 메신저: 대화형 UI

윈도우 PC에서의 메신저 창은 대화형을 취했음. (버블은 X) 나와 너를 색으로 구분. 대화명이 아이덴티티. 이모티콘은 일찍이 발달.

네이트온 MSN

old

new

me

you

7

messaging_ 피쳐폰 문자함: 편지형 UI

피쳐폰에서 메세지는 한쪽의 내용만을 보여줬음. “답장” 버튼을 주요 기능으로 취급함.

you

메뉴 답장 삭제애니콜

메뉴 답장확인싸이언

간편답장

8

messaging_ 윈도우 모바일 시리즈: 모바일 대화형 UI의 시작

모바일에서 대화형 UI를 도입한 것은 (지금은 사라진) 윈도우 모바일 시리즈 부터. 나와 너를 색으로 구분.

윈도 모바일 시리즈

응답하라 2010 윈도우 모바일 탑재한 스마트폰 210 시리즈 출시.

9

messaging_ 풍선은 언제부터?

>>>>

편지 말풍선

10

messaging_ 풍선은 ‘i chat’ 부터

i Chat

i phone 3

말풍선 형태의 대화창은 맥 OS X용 메신저 프로그램인 iChat가 그 시초. 모바일에서도 i phone 3와 같이, 나와 너의 좌우 구분 및 말풍선 UI 가 범용적으로 사용됨. 프사 아이덴티티.

old

new

meyou +

말은 주고, 받는 것.

11

요즘 messaging_ 풍선 꼬리 자르기

사람들이 말풍선 대화형 UI에 익숙해짐에 따라서, 말풍선 꼬리는 자르고, 방향으로만 나와 너를 구분하거나, 아예 방향성도 생략하는 대화 박스형 UI가 나타남.

OperatorTwitter

Skype

12

요즘 messaging_ 버튼으로 응답하는 로봇과의 대화

로봇과 대화 시, 버튼식 UI.; 응답을 버튼으로 선택. 사실상 대화가 아니라, ‘대화형’ 조작.

OperatorLuka

Skype

버튼식 대화는 키보드 입력이 어려운 스마트 워치에서도 나타남.

13

헬순이 messaging_ 로봇과의 대화: 사람은 어떻게 로봇과 대화할 수 있을까

- 더 대화같은 ‘대화형’ UI - 대화의 분위기를 살려야. 더 대화처럼.

(말풍선, 프로필, 입력중) - 사람같은 이름. - 성격의 부여.

- 로봇이 리드하는 대화를 따라. - 답정너 버튼식 응답. - yes or no 또는 okay, thank you가 대부분.

2. 미션 시나리오

Indicator

헬순이

AM월

화

수

목

금

토

PMIndicator

미션 입력

이번주도 파이팅!

오늘 먹은 가공 식품의 당 함유량을 찍은 사진을 보내주세요.

미션에 대해 코치에게 하고 싶은 말이 있나요?

오늘은 젤리만 두 종류를 먹었습니다. 하리보 작은 것 한 봉지와 코스트코 젤리 2알을 먹었습니다. 내일부터는 더 줄여보겠습니다.

취소 보내기

사진은 없지만, 미션 수행 완료

안녕하세요. :-) 활기찬 월요일입니다. 이번주의 식이 미션 프로그램은 [“당”, 언제까지 당당하게 드실건가요 ] 입니다. 식약처가 발표한 자료에 따르면, 한국인의 당 섭취량의 대부분은 가공식품이 차지합니다. 이번주에는 가공식품을 먹을 때마다 당을 확인하고, 당이 더 낮은 식품을 골라보세요! 매일 먹은 가공 식품의 당 함유량을 사진으로 찍어오는 것이 이번주의 미션입니다.

딩동! 간코치입니다. 나는 하루에 어느정도의 활동을 하고 있을까?'에 대해 생각해보신적 있으신가요? 우리의 목표! 2주에 2만보로 2kg감량이죠? 처음부터 2만보는 무리입니다. 그래서 오늘부터 1만보를 시작으로해서 차츰 늘려가보려고 합니다. 미리 겁먹지 마세요~생활속에서 지금보다 약간만 더 움직이신다면 만보는 충분히 가볍게 채울 수 있는 숫자랍니다 :) 걸음수는 스마트폰에 자동으로 기록됩니다!

Thank You!

15