태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.


'미투데이'에 해당되는 글 3건

  1. 2010.10.29 [UI 디테일] 미투데이의 Family UI 비교 – 웹, iOS 앱, 안드로이드 앱을 중심으로 (3) by 위승용 (uxdragon)
  2. 2010.09.03 미투데이(me2Day) 친구찾기 UI (이하 미친UI) 이상하지 않나요? (3) by 이 재용
  3. 2010.05.19 미투데이를 통해 배우는 리치 인터페이스 디자인 패턴 (4) by 위승용 (uxdragon)
2010.10.29 15:20

[UI 디테일] 미투데이의 Family UI 비교 – 웹, iOS 앱, 안드로이드 앱을 중심으로



Family UI의 정의
'Family UI'는 자동차 업계에서 사용되는 Family Look 이라는 단어에서 인용한 것으로 한 브랜드에서 나온 모델들에 브랜드 정체성을 부여해주는 디자인 요소를 말합니다. Family Look을 적용한 디자인은 모델이 다르더라도 특정 회사의 제품이라는 것을 바로 구별해 낼 수 있어서 브랜드 정체성을 강조해주는 효과와 함께 향후 구매력에 영향을 준다고 합니다.[각주:1]


미투데이의 Family UI 비교
웹, iOS 앱, 안드로이드 앱 미투데이를 사용하면서 느꼈던 Family UI 의 차이점을 디테일한 면 위주로 비교해 보았습니다. 전반적으로 미투데이는 웹, iOS 앱, 안드로이드 앱을 일괄적으로 가져가기 위해서 애를 쓴 모습이 보입니다만, 이 글은 차이점에 대해서만 기술함을 밝혀둡니다.
(*미투데이는 친구들과 실시간으로 이야기를 나눌 수 있는 150자 마이크로 블로그입니다. 자세한 설명은 여기에서 확인하세요.) 
 
1. 아이콘
미투데이의 아이콘중에서 '찾아보는' 이라는 아이콘이 있습니다. [그림1]에서 '찾아보는'은  키워드를 이용한 검색 기능을 제공하는데, 같은 레이블의 아이콘임에도 불구하고 아이콘을 서로 다르게 표현하고 있음을 알 수 있습니다. 실제 기능을 보면 좌측에 있는 '찾아보는'은 내가 등록한 키워드 위주로 보여주는 역할을 수행합니다. 우측에 있는 '찾아보는'은 키워드를 보여주기는 하나 '검색 기능'이 있기 때문에 다른 아이콘을 쓰고 있습니다. 다른 기능이라면 아이콘만 다르게 할 것이 아니라 레이블을 변경해야 하지 않나 생각합니다.


[그림1]
'찾아보는' 아이콘의 차이 (- 웹, - iOS 앱)

그 다음으로 '프로필'을 나타내는 아이콘을 보시겠습니다. [그림2]를 보시면 좌측에 있는 프로필과 우측 옵션 메뉴 키에 있는 프로필이 레이블은 같은데 아이콘을 다르게 표현하고 있습니다. 내용을 파악해보면 좌측에 있는 프로필은 엄연히 보면 프로필 설정 기능을 수행하며, 우측에 있는 프로필은 프로필 확인으로 해석할 수 있습니다. 마찬가지로 같은 레이블인데 다른 기능을 수행하므로 아이콘 뿐 아니라 레이블을 변경해야 할 것 같습니다.


[그림2]
프로필 아이콘의 차이 (- 웹, - 안드로이드 앱)

[그림3] 을 보시면 우측의 '사람찾기' 아이콘을 웃는 아이콘으로 표현하고 있습니다. 그렇다면 좌측의 아이콘도 과연 사람찾기일까요? 좌측의 아이콘은 아이콘을 변경할 수 있는 아이콘입니다. 이 상황에서는 좌측의 아이콘을 다른 아이콘으로 변경하는 것이 좋을 것 같습니다.


[그림3]
사람찾기 아이콘의 혼용 (좌,우 iOS 앱)

2. 레이블 
자 이제 레이블을 보시겠습니다. [그림4]를 보시면 좌측의 '댓글달기' 버튼과 우측의 '댓글쓰기' 레이블은 같은 기능을 수행합니다. 하지만 레이블의 차이가 있습니다. '쓰기' 버튼과 '올리기'버튼도 사실은 같은 기능을 수행합니다만 레이블의 차이가 있습니다. 물론 UI Flow 상으로는 문제가 없습니다만, 레이블을 통일시켜주는 것이 좋을것 같습니다.


[그림4]
레이블의 차이 (- 웹, - iOS 앱) 


3. 레이아웃
이번에는 레이아웃을 보시겠습니다. [그림5]번을 보시면 좌측의 글을 올린 날짜, 시간은 오른쪽 정렬로 되어있는데, 우측의 글을 올린 날짜, 시간은 왼쪽 정렬로 되어있습니다. 이때에는 두개를 통일시키는 것이 일관된 경험을 줄 수 있겠지요.
또한 날짜 시간 표현방식도 자세히 보시면 미묘하게 다름을 알 수 있습니다. 차이점이 보이시나요?

또한 아래 이미지 표현방식도 차이가 있습니다. 아이폰 앱에서는 한줄에 2개씩 보여주는데, 안드로이드 앱에서는 한 줄에 6개씩 보여줍니다.
* 추가: 아이폰에서 미투한 사람이 몇명이 기준인지는 모르겠습니다만, 많아질 경우 한줄에 5개씩 보여짐을 확인했습니다. 그래도 일관된 UI/GUI는 아니군요.


[그림5]
레이아웃의 차이 (- iOS 앱, - 안드로이드 앱)
 
4. 네비게이션
전체 네비게이션도 OS에 따라 차이가 있습니다. [그림6]을 보시면 좌측 안드로이드 앱에서는 홈(App dashboard) 화면이 있어서 어디를 들어가고 싶을때 홈(App dashboard) 화면을 거쳐서 이동해야 합니다. 하지만 iOS 앱에서는 하단 탭에 자기가 보고 싶은 카테고리 4개를 선택하여 구성할 수 있습니다. 이 차이점은 안드로이드 폰과 아이폰의 태생적인 차이점 일 수도 있겠지만, 한 회사의 서비스이니만큼 어느정도는 일관성을 지켜주는것이 좋겠다고 생각합니다.

[그림6] 네비게이션의 차이 (- iOS 앱, - 안드로이드 앱)

5. 그외에...
미투데이의 '화화'님께서도 iOS의 미투데이와 안드로이드 미투데이 앱의 사용상의 차이점을 기술 해주셨습니다. 작성한 글을 롱탭 했을때 UI가 다르다는 점을 기술하고 있습니다.



정리하며…
다음과 같이 미투데이의 웹, iOS 앱, 안드로이드 앱을 비교해 보았습니다. 
물론 미투데이의 웹 + iOS 앱 + 안드로이드 앱을 모두 사용하는 사람들은 많지 않을수도 있습니다. 그러나 한 서비스를 사용하다가 다른 서비스로 이동하더라도 동일한 경험을 제공하도록 하는것이 사용성 및 서비스의 새로운 가치 창출을 위해서는 꼭 필요하다고 생각합니다. 동일한 경험을 제공하되 각각의 플랫폼의 성격에 따라 최적화된 UI가 나오는것이 좋지 않을까요? 물론 그렇게 하는것이 쉽지는 않을 것입니다. 여러번의 시행착오와 개선이 필요하겠지요. 미투데이는 충분히 잘하고 있고, 잘하고 있기 때문에 더 아쉬운 점을 찾게 되는 것 같습니다. :)


[참고##UI 디테일##]


  1. HCI 2009 학술대회 '멀티플랫폼에서 Family UI의 적용에 대한 사례연구'에서 인용 [본문으로]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 1 Comment 3
Ad Test...
2010.09.03 17:15

미투데이(me2Day) 친구찾기 UI (이하 미친UI) 이상하지 않나요?

많이 쓰시는 분들은 익숙하시겠지만, 요즘의 SNS들은 참 쓰기가 어렵습니다. 제 주변친구들은 이제 모두 40대인데요, 개념 자체가 생소한 부분도 있지만 워낙 UI 자체를 못 만든 부분도 저는 분명히 있다고 생각합니다. twitter도 그렇고 facebook도 그렇고 몇 년째 쓰고 있는 저한테도 아직 어렵고 좌절할 때가 있는데 이제 처음 시작하는 친구들은 어떨까 걱정이 됩니다. 예전에 가입만 하고 안 쓰던 미투데이를 다시 써보려고 하는데요, 어려움이 느껴지네요... twitter나 facebook 만큼의 좌절은 아니지만, 우리 나라 서비스나까 애정을 가지고 제가 느낀 점을 써 볼까 합니다.

가입 후 친구가 0명이었는데, 처음 친구를 등록해 보았습니다. 2명을 하다 너무 힘들어서 이 글을 쓰면서 3번째로 해 봅니다. 이미 아이디를 알고 있는 친구, pxdstory 입니다.

써 보신 분은 아시겠지만, 미투데이는 완전히 다른 모습의 2개의 화면이 있습니다.


처음엔 이게 굉장히 헷갈렸습니다. 자꾸 누를 때 마다, 있던 메뉴가 사라지고 다른 게 나오고 또 다시 바뀌고 하더라구요? 그러나 이 부분은 몇 번 해 보면 익숙해 질 것 같더라구요. 이 부분은 아무래도 트위터나 페이스북에 익숙해져서 그런 것 아닐까도 생각했구요. 그런데... 나름대로 애정을 가지고 적응하려는 저를 괴롭히는 건, 이상한 메뉴 구조입니다.

우선 편의상 위 왼쪽 화면을 '미투데이' 오른쪽 화면을 '마이미투'라고 칭하고 아래의 그림을 한 번 보시죠.


자, 위 페이지는 '미투데이'일까요? 아니면 '마이미투' 일까요???

언듯보면 '미투데이' 안에 '마이미투'가 세부 메뉴로 있는 것 같지 않나요? 하지만... 다 아시다시피, 이 페이지는 '마이미투'입니다. 흠... 그럼 '마이미투'안에 '마이미투' 메뉴가?? 아.. 모르겠네요. 'me2Day'를 누르면 다시 위의 하얀 배경 '미투데이' 페이지로 가기 때문에, 이 페이지가 분명히 '미투데이'가 아니고 '마이미투'라는 건 확실한 것 같은데?

물론 많이 쓰면 어떻게 되어도 큰 문제없겠지만, 처음 쓰거나 다른 거 하면서 쓰기 때문에 주의를 많이 못 기울이면 굉장히 혼동될 수 있는 구조 아닐까요? 흠... 제가 많이 써 보지 않아서 단정하긴 힘들지만...

더 이상한건... 자 이제 제가 pxdstory 를 친구로 등록하려고 합니다. 어디에 있을까요?? 처음엔 좀 힘들더라구요. 이미 두 명이나 등록했는데... 세 번째 하는데도 여전히 적응이 안 되고 또 찾아야합니다. 제가 좀 무딘 사용자 일 수도...쩝...

그나마 가장 유사한 '내친구들'에 올려 보았습니다.
아! 여깄네요! 친구신청 해야지!

쩝...

친구신청에서는 친구를 신청할 수 없군요...

아 그럼 어디서 할 수 있을까요?? 한참을 헤메다가... "내친구들" 한 번 눌러볼까요?

어... 저는 '내친구들' 눌렀는데 '내친구들 > 모든친구'에 들어왔군요. 뭐 이런 건 친절하다고(?) 할 수도... (브레드크럼 진짜 이상하게 쓰네...하는 생각이 없는 건 아니지만)

이것저건 많이 눌러보았습니다...(중략)

오른쪽에 보면 '친구 찾기'가 있습니다. 해 보겠습니다. 결과는 없군요. 이건 내가 등록한 친구들 가운데서 찾는 겁니다. 어? 잠깐

그럼 여기에 두 번째 (아니면 세번째인지 원...) '친구찾기'는 또 뭐지? 이건 다른 찾기 인가?


친구 찾기에 들어와서 제가 발견한 건 !!! 아 내가 하려는 건 '미투데이 회원 찾기' 구나.

자 이제 정리해 보겠습니다.

미투데이(me2Day)에서 새로운 친구를 추가하려면, '친구추가'에 들어가면 안됩니다. '내친구들'에 들어가서 친구찾기 하셔도 안되고요, '내친구들' 밑에 나오는 '친구찾기'에서 '미투데이 회원찾기'를 하면 됩니다.

아.. 이해안된다고요? 내친구들 안에 나오는 친구찾기는 내 등록된 친구들 중에서 찾는 거구요, 내친구들 밑에 나오는 친구찾기는 내 진짜 친구들 중에서 찾는 거라구요. 특히 친구추가는 친구추가 할 때 하시면 안되욧!

크하하... 자 이렇게 하면 됩니다... 할 줄 알았죠? pxdstory 넣고 한 번 해 보세요... 나오나... pxdstory는 이름일까요, 아이디일까요, 닉네임일까요?

메롱~~~

본격적인 어려움은 지금부터입니다만... 다른 할 일이 있어서 더 못 쓰겠네요.
(해 보시면 지금까지 제가 설명해오던 메뉴구조가 완전히 뒤바뀐... 제 3의 페이지를 보시게 될겁니다)

(물론 그 위의 검색이나 이런 건 다 나중에 알았습니다... pxdstory는 독특해서 검색이 빠르더라구요. 하지만 평범한 이름의 친구들은 검색으로 불가능해요)

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 1 Comment 3
Ad Test...
2010.05.19 17:43

미투데이를 통해 배우는 리치 인터페이스 디자인 패턴

그림0. 리치 인터페이스 디자인 책표지

최근 '리치 인터페이스 디자인' 이라는 책을 접했습니다. 이 책에서는 웹에서 독특하고 풍부한 경험을 만들어 낼 수 있는 가이드, 패턴, 원칙들을 담고 있습니다.

A. 디자인 패턴이란?
크리스토퍼 알렉산더는 '패턴'을 다음과 같이 정의했습니다.

... 우리를 둘러싸고 있는 환경에서 반복적으로 나타나는 특정한 문제와 그에 대한 핵심적인 해결책을 설명하는...
그리고 몇 년후 '디자인 패턴'은 사용자 인터페이스 디자인의 범위까지 그 영역을 확장했습니다. 이 책에서는 웹 인터랙션 디자인 패턴을 다루고 있습니다.

B. 여섯 개의 디자인 원칙
이 책에서는 이 패턴들을 여섯개의 디자인 원칙으로 분류하였습니다. 원칙들의 자세한 설명은 '리치 인터페이스 디자인' 책을 참고하세요.

제1원칙  다이렉트하게 만들어라
제2원칙  가볍게 유지하라
제3원칙  페이지에 머무르게 하라
제4원칙  유인 요소를 제공하라
제5원칙  전환 효과를 사용하라
제6원칙  즉각적으로 반응하라


C. 미투데이의 리치 인터페이스 디자인 패턴
이 책을 보던 도중 Micro SNS 미투데이에서 사용하고 있는 '디자인 패턴'들이 눈에 띄더군요. 이에 미투데이에서 사용하고 있는 리치 인터페이스 디자인 패턴들을 찾아보았습니다. 미투데이에서 사용하고 있는 모든 리치 인터페이스 디자인 패턴들을 찾아보았다고는 생각하지는 않습니다. 또한 패턴에 대한 이해 부족으로 제대로 매칭이 안되었을 수도 있으니 이점은 감안해주셨으면 좋겠습니다.


1. 단일 필드 인라인 편집
페이지 내 편집 모듈 가운데 가장 간단한 타입은 단일 필드의 텍스트를 편집하는 경우입니다. 별도의 창이나 페이지로 이동하지 않고 그 자리에서 편집할 수 있습니다. (p.6) 미투데이에서는 태그를 입력했거나, 입력하지 않았을 경우에도 태그 추가 및 편집이 가능합니다. 태그 추가 및 편집 시 단일필드 인라인 편집방법을 사용하고 있습니다.

그림1. 미투데이 단일 필드 인라인 편집


2. 드래그 앤 드롭
언뜻 보기에 드래그 앤 드롭은 대상을 잡아 어딘가에 놓기만 하면 되므로 아주 간단해 보입니다. 그러나 상호작용이 일어나는 세세하고 개별적인 '상호작용 순간'(interesting moments) 을 고려해서 디자인을 해야 합니다. (p.31) 미투데이에서는 드래그 앤 드롭을 친구관리 페이지에서 활용하고 있습니다. 미투데이에서는 친구 리스트를 드래그하여 사용자가 만든 폴더 안에 넣을 수 있습니다. 어려운 동작이기때문에 '?' 버튼을 두어 설명을 하고는 있지만 과연 사용자가 얼마나 익숙하게 쓸 수 있을지는 의문이 듭니다.

그림2. 미투데이 드래그 앤 드롭


3. 상시 노출 도구
상시 노출 도구는 콘텐츠 안에 문맥 도구를 직접 배치하는 가장 간단한 형태입니다. (p.96) 미투데이는 미투하기 버튼을 누른 사람의 숫자를 상시 노출 도구로 보여주고 있습니다. 또한 미투하기 버튼 생성은 마우스 오버 노출도구로 사용하고 있습니다. 

그림3. 미투데이 상시 노출 도구


4. 마우스 오버 노출도구
마우스 오버 노출도구는 문맥도구를 항상 노출하는 대신, 필요할때만 보이도록 하는 방법입니다. (p.100) 미투데이에서는 삭제, 편집 버튼을 마우스 오버 노출도구로 사용하고 있습니다. 프로필 이미지도 마찬가지로 이미지에 마우스를 올릴 때 버튼 메뉴를 제공하여 사용자에게 기능을 쉽게 발견하게 합니다. (p.103 편집)

그림4. 미투데이 마우스 오버 노출도구 1

그림5. 미투데이 마우스 오버 노출도구 2



5. 오버레이
오버레이는 브라우처 창 안에 페이지를 일부 덮는 형태로 보여집니다. 오버레이는 만드는데 리소스가 적게 들고 화면에 뜨는 속도도 빠릅니다. (p.123) 미투데이에서는 프로필 이미지를 클릭하면 상세정보가 오버레이 형태로 보여집니다. 또한 로그인을 하면 입력 오버레이가 뜨게 됩니다. 미투데이의 상세정보 오버레이와 입력 오버레이를 없애기 위해서는 우측 상단의 X 표시를 클릭하거나 오버레이를 제외한 배경영역을 클릭하면 됩니다. 이 책에서는 활성화와 비활성화가 서로 대칭적인 상호작용이 되도록 하라고 충고하고 있습니다.


그림6. 미투데이 상세정보 오버레이



그림7. 미투데이 입력 오버레이



6. 대화상자 인레이
인레이는 페이지 내에 정보를 직접 삽입하는 방법입니다. 인레이를 이용하는 가장 간단한 방법은 페이지 일부분을 확장하고, 그 안에 대화상자를 보여주는 방법입니다. (p.143) 미투데이에서는 친구관리 > 모든친구 탭에서 친구그룹 버튼을 선택하면 그룹을 인레이로 보여주고, 재 선택시 사라지게 합니다. 인레이의 장점은 페이지 내에 삽입되므로 다른 정보를 가릴 우려가 적다는 점입니다.

그림8. 미투데이 대화상자 인레이


7. 활성화
흐리게 하기와 밝게 하기 효과는 상호작용할 수 있는 대상을 표현할때 사용할 수 있습니다. (p.256) 미투데이에서는 검색을 하면 검색 건 수를 타임라인으로 보여줍니다. 활성화를 하면 짙은 보라색으로 보여주며, 영역이 회색으로 강조됩니다. 현재 선택중인 영역은 흐린 보라색으로 보여주고 있습니다.

그림9. 미투데이 활성화


8. 스포트라이트
스포트라이트는 인터페이스에서 변화가 막 일어났을때 유용합니다. 스포트라이트는 흔히 처음에는 대상의 배경을 하이라이트하고, 점점 희미하게 만드는 방법으로 적용합니다. (p.269) 미투데이에서는 글을 작성하면, 하이라이트 된 상태에서 점점 희미하게 보이는 방식을 사용하고 있습니다. 글을 삭제하면, 글은 상단으로 사라집니다. 이 외에도 미투데이는 글을 저장하거나, 친구신청이 왔을경우와 같은 상황에서 변화를 보여줍니다. 이 방법은 시간이 지나면 사라지며, 별도의 실행이 필요 없는 확인 정보를 간단히 제공하고 자동으로 사라집니다.

그림10. 미투데이 스포트라이트

그림11. 미투데이 변화 나타내기


9. 검색 자동완성
자동완성은 사용자의 행위가 필요한 인터페이스에서 그 행위에 따라 동작해도 되는 효과적인 패턴입니다. 사용자가 창에 입력함에 따라 그에 맞는 값이 자동으로 보여지고, 유사한 항목을 고를 수 있습니다. (p.297) 미투데이는 '글검색+사람찾기' 검색에서 자동완성 기능을 사용하고 있습니다.

그림12. 미투데이 검색 자동완성



참고자료

1. 리치 인터페이스 디자인(Designing Web Interfaces), 인사이트, 빌스콧/테레사 닐 지음, 윤지혜, 구신애, 김기형, 이은아 옮김 (2010)
2. Micro SNS 미투데이 http://me2day.net

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 4 Comment 4
Ad Test...