- feature: Knowledge Panel feature on Google Search product
- issue: not clear usage of words by "updates"
- recommendation: if the "updates" is referring to Google+ posts, how about
- (1) using "Google Plus post updates" instead of "updates" to send a clear message so that users can not just be assured by where (i.e. Google Now card) the updates will be displayed and what kind of information (i.e. Google+ posts) will be updated
- (2) removing the line under "Get updates about Kevin Kelly" and somehow put the get updates and "Recent posts" modules together so that information hierarchy is clear to understand
- (3) inserting a new line between "Recent posts" and Books module because they are two different entity
- lesson: in UI design, to avoid confusion sometimes it is important to specify what and where users get when they press a clickable link or button
The mission of this blog is: 1. to openly talk about meaningful UX related content 2. to encourage everyone to think like UX professionals in a holistic way; so that any attempt to design, develop, and distribute can be more people-loving and personally meaningful; therefore, people's time and energy will be spent on things of true importance not being wasted on tedious UX.
Wednesday, March 12, 2014
[personal UX/UI review] information design for Google Knowledge Panel's "You will get updates on Google Now"
[tool recommendation] cloud-based, annotate-able and share-able screenshot software: Monosnap
The best screenshot tool ever for your desktop (both PC and Mac), iPhone, and iPad to annotate and share seamlessly.
The best part is that this tool is FREE even for the usage of its cloud system!
Because of this tool's user-friendliness, functionality and perhaps most importantly simplicity, I just couldn't close my mouth after install the program on my PC and iPhone and use it.
Thanks to whoever designed and developed this tool. Highly recommended!
- URL: http://monosnap.com/
The best part is that this tool is FREE even for the usage of its cloud system!
Because of this tool's user-friendliness, functionality and perhaps most importantly simplicity, I just couldn't close my mouth after install the program on my PC and iPhone and use it.
Thanks to whoever designed and developed this tool. Highly recommended!
- URL: http://monosnap.com/
[Personal UX/UI review] unnecessary interaction to see iOS's Messages's time stamp
- app: Messages (iOS's default text message app)
- issue: the time stamp appears when swiped to the left although the space doesn't change after swiping interaction
- recommendation: just display the time stamps so users don't even need to swipe to see when each message is sent or received
Friday, February 28, 2014
[conference] Google Developers Summit 2014
Title
|
Google
Developers Summit 2014
|
Place
|
COEX Grand Ballroom 104,
105
|
Time
|
February 26, 2014 1PM~6:30PM
|
Speaker
|
Ryosuke Matsuuchi, Mickey Kim, et al.
|
Organizer
|
Google Korea
|
Focus
|
Android design guideline, Chromecast API, Google Play
utilization
|
I.
Android
design guideline [Chansuk Yang, Developer Relations]
1.
Message
1)
Basic advice
① targetSDK>19
(meaning use the most recent)
② change
support package level to support minimum Android OS level
2)
What’s new in KitKat
① Home
menu button: use app launcher icon as home menu button
② Visual
design: when design, comply with people’s mental model so users don’t need to
learn something new
③ Two
gestures: for zooming in and out, double touch or double touch drag
④ Full
screen mode: lean back mode (touching the screen in any way will bring navigation
and notification bar back into place.), immersive mode (swiping down from the
top or up from the bottom will bring notification bar or navigation bar
respectively)
3)
Android design pattern
① Action
Bar: app icon, view control, action buttons, action overflow
A
Suggestion: Android doesn’t recommend
customized Action Bar
② Up and
back difference
A
Up: higher category
B
Back: previous page or closing a pop-up
window
③ App
structure
A
Tab: fixed and scrollable tabs; needs to be
located at the top of the screen; needs to support swiping
B
Navigation Drawer: system bar needs to stay
④ Dialogue
and Toast principle
A
Principle
l How much
impact will the action bring to users? E.g. purchase brings a great impact
l Does
it allow users miss-click?
l Can
the result of the action returnable?
l Sufficient
user feedback to users? E.g. Facebook’s like button
B
Example: closing an app-> taking too
much time-> consider using Dialogue window
⑤ Notification:
utilize expand and contract option
4)
Responsive design
① Need
to support tablet
② Use DP
(density-independent pixels) (e.g. 200 dp)
③ Resource
qualifier- provide different size icons
2.
Takeaway
1)
targetSDK>19 (meaning use the most
recent)
2)
Home menu button: use app launcher icon as
home menu button
II.
Chrome
WebView Essentials [Alex Danilo, Developer Advocate]
1.
Message
1)
What does this mean?
① New
capabilities:
A
indexedDB: important technology to store
data (e.g. games)
B
Web Sockets: push data back and forth
client and server
C
requestAnimationFrame: synchronize animation
on screen (not wasting time compared to JavaScript)
D
SVG filters and Effecs: e.g. convolution blurs
E
H/W
accelerated rendering (e.g. <canvas>)
② Debugging
Features: Analyzing web traffic, monetizing
③ Hybrid
applications: Use native component, interfacing JavaScript to native
④ Compatibility
mode: Use targetSDK>19
⑤ Multi-threading
and thread blocking
⑥ Custom
URL Handling: URLs must conform to RFC 3986
⑦ Viewport
Changes
⑧
Styling
Changes
⑨
Sizes
are in CSS pixels instead of screen pixels
2)
Best
practices
① Set
SDK version to 19: <uses-sdk android:targetSdkVersion=”19”.>
② Enable
hardware acceleration: <application android:hardwareAccelerated=”true”
..>
③ Enable
Debugging: WebView.setWebContentsDebuggingEnabled(true);
3)
The Future: Web RTC (real-time
communication; P2P communication; e.g. Google Hangouts is coming
2.
Resources
1)
documentation: http://goog.gl/1gJ8gp, http://goog.gl/Xj2zpK
2)
samples: http://goo.gl/2LfCBS
3)
twitter: @alexanderdanilo; g+
google.com/+alexdanilo
III.
New
AdMob- profitability, convenience and control [Siyoung Choi, PBS AdMob Lead]
1.
Message
1)
Best practice
① Why it
got popular:
A
YouTube video review (subscription 3 M)
B
Review: ## reviews
C
Community BBS
D
Siyoung’s insight: Low requirement, short
game time, free
② Ways
to purchase mobile app contents: Freemium, in-app purchase, download
③ 수익= 매출
- 비용
A
운영서버, 퍼블리싱, 분석도구, 마케팅채널, 보안솔루션, 결제솔루션
B
매출: DL x재방문율x결제율x ARPPU
C
매출
결정 변수: 마케팅x In app 설계x service balance x결제지원수단, 개인별 결제 한도
④ 모바일 광고: 사용자는
돈을 내지 않고 광고주가 대신 지불+손쉬운 적용, 안정적
수익, 적은 투자
2)
AdMob 특장점
① Reach
and scale: Google Play global target, localization languages
② Innovative
ads: 전면 동영상
등 creative
③ High
fill-rate: traffic이
수익화에 적용
3)
광고
수익의 규모는
① 계산: 10M
user, 노출율 90%, CPC 100 KRW, xxx -> 9M KRW
4)
New AdMob
① 편의성: 빨라진
지급주기, 앱 개발자에게 최적화 된 UI (수익화/홍보 지원), 앱 업데이트 없이
mediation, house ad 적용
② 수익성: 전환최적화
기능 (자동으로 단가 최적화), 수익 극대화 (mediation 활용- Optimize AdMob Network)
③ 컨트롤: 세분화된
필터링 (140여개 예. 경쟁사 광고 제외), 광고 심사 센터
5)
광고
수익화를 위한 적용 Tip
① Refresh
rate: 30~60 seconds
② 광고와 컨텐츠의 경계
③ Smart
banner 사용: portrait <-> landscape
④ 전면광고: 사용자
별로 노출횟수 조절, 사용자가 즐거울 때, user flow 끊기는
지점, 호출과 노출분리, 최신 SDK 사용, Google Analytics 사용
2.
Takeaway
1)
Request to convert to New AdMob at Bit.ly/newadmob
2)
광고
수익화를 위한 적용 Tip
① Refresh
rate: 30~60 seconds
② 광고와 컨텐츠의 경계할 것
③ Smart
banner 사용: portrait <-> landscape
④ 전면광고: 사용자
별로 노출횟수 조절, 사용자가 즐거울 때, user flow 끊기는
지점, 호출과 노출분리, 최신 SDK 사용, Google Analytics 사용
IV.
Chromecast
[Mickey Kim, Head of Asia Pacific, Chromecast]
1.
Message
1)
Lesson Google learned
① need setup
experience to be easy
② need nothing
new to learn
③ need
to support cross platforms and devices
④ need
to support second screen (smartphone, tablet, laptop)- because 77% of the time
while watching a TV, second screen has been used; the bigger the screen, the
more YouTube people watch
2)
setup process: plug in-> connect to
Wi-Fi-> cast (bringing optimized resolution depending on screen size)
3)
benefit
① video
and audio cast to TV
② Chrome
web browser tab mirroring
2.
Takeaway
1)
Just add code from Cast SDK at
developer.google.com/chromecast into your smartphone, tablet and website
2)
Review the Cast UX requirements and
integrate
V.
Google
Cast SDK Overview [Chansuk Yang, Developer Relations]
1.
Message
1)
Download SDK at developer.google.com/cast
2)
Google Cast 구성요소
① Sender
Application:
② Receiver
Application:
③ Cast
Device
④ Streamiing
media server
3)
Check out
① User
Experience with Google Cast at https://developers.google.com/ast/docs/ux_guidelines
② Google
Cast Design Checklist:
4)
Google Cast SDK 구성요소
① Sender
SDK- Android (google Play Service), iOS (SDK), Chrome (JavaScript)
② Receiver
SDK- Receiver Library & Media Player Library (JavaScript)
③ Cast
Developer Console
5)
시작하기
① Google
Cast Developer Console 계정
등록- $5 onetime fee, receiver app/device registration and
management
② Receiver
app 등록: Ap ID 발급
③ Cast
Device 등록 (unlock)- 개발, 디버깅, 테스팅을
위해
6)
Sender Application: cast device 검색, receiver
app 실행, 보안 채널 연결, UI control,
media message sending, custom message sending
7)
Receiver application: 단순 웹 어플리케이션,
컨텐츠를 표시하기 위한 인터페이스 제공, 미디어 컨텐츠를 컨트롤 하기 위한 메시지 수신
및 처리, 앱에 특화된 사용자 정의 메시지 수신
8)
Receiver application 종류: default
receiver, styled receiver (CSS 만 등록), custom receiver,
9)
Supported media: most open format
10)
Google Cast Sample apps:
github.com/googlecast
11)
Stack Overflow: #google-cast
2.
Takeaway
1)
Include Chrome Cast in your app
Saturday, January 25, 2014
[Personal UX/UI review] packet design
<case: CheilJedang's medicine packet design>
Issue: at the upper right hand corner, the packet says "pls be careful since your mouse get hurt when taking the medicine"
Recommendation: design the packet safe enough so that no one get hurt while taking the medicine and no need for patients to worry about safety
Monday, January 20, 2014
[Personal UX/UI review] subway ticket gate machine design
<case: subway ticket gate machine at Konkuk Univ. Station in Korea>
Issue: 1. twisted diagonal design makes passengers to twist arms to badge 2. badging area seems to be too large and can be misunderstood like below marking
<the same machine in a different angle>
Recommendation: like image below, 1. let passengers badge without making them twist arms 2. make badging area design intuitive enough so that no one get confused
Sunday, January 19, 2014
[Personal UX/UI review] building number and name system on campus
<case: Seoul National University has number and name at the top of some buildings>
Positive: first-time visitors can easily identify buildings from afar
Issue: difficult to tell which building is which from afar
Recommendation: put a number and name on top of each building if appropriate
Subscribe to:
Posts (Atom)