Name: testslide
Published: 2021-11-15T14:14:58+09:00
Keywords: TEST

内科

消化器内科

循環器内科

呼吸器内科

血液内科

糖尿病内分泌代謝内科

腎臓内科

アレ膠リウマチ内科

脳神経内科

総合診療科

アレルギー科

腫瘍内科

老年内科

感染症科

緩和ケア科

救急科

集中治療科

外科

消化器外科

呼吸器外科

乳腺外科

整形外科

脳神経外科

泌尿器科

形成外科

歯科口腔外科

リハビリテーション科

心臓血管外科

頭頸部外科

小児科

産婦人科

精神科

放射線科

麻酔科

産業医

初期研修医

漢方医学

病理診断科

基礎医学系

皮膚科

眼科

耳鼻咽喉科

医学生

その他

testslide

Cheating The UX When There Is Nothing More To Optimize Pixel Pioneers 2018  —  Stéphanie Walter   

stephaniewalter.design  @WalterStephanie  UI & UX designer. Mobile enthusiast Pixel and CSS Lover.  Currently working for   

Objective time  Psychological time  (the clock)  (perception of time in my brain)   

External factors might affect speed perception…   

How fast can users interact with the content?   

Google and Awwwards study  User profile  User State of Mind  Younger audience is more demanding  Speed is perceived as faster by relaxed users   

Speed perception impacts user satisfaction.   

Instant visual feedback on user micro-interactions   

Providing states is the designer’s job   

300ms - 1 second Delay can be noticed but it’s tolerable, no special feedback is necessary.   

2 - 5 seconds Dynamic indeterminate loaders to show that the system is still working   

“Everything is fine, the system is currently working”   

More than 5 seconds Determinate progress indicators to keep user focused   

๏  Show advanced dynamic progress indicator   

๏  Show advanced dynamic progress indicator  ๏  Explain what will take time (and why)   

๏  Show advanced dynamic progress indicator  ๏  Explain what will take time (and why)  ๏  Show current progression (% or steps)   

๏  Show advanced dynamic progress indicator  ๏  Explain what will take time (and why)  ๏  Show current progression (% or steps)  ๏  If possible, don’t block users   

“ 10 seconds is about the limit for keeping the user's attention focused  “ (Nielsen, 1994; Bouch, 2000)   

“We optimized every piece of code possible but users with big queries are still complaining”   

๏ While users wait for the search to finish, the interface displays useful information  A seagull replaces the boring spinner — widely approved by the users —   

While users wait for the search to finish, the interface displays useful information   

It looks fast… Clever transitions and animations   

Animate arrivals and departures  via Val Head   

Ease-out works best for instant reactions, menus, buttons, to respond to user input.  Ease-in works best for prompt windows and when you need to display information.   

It’s more satisfying to see the bar speed up towards the end.  (Harrison, Amento, Kuznetsov et Bell - 2007 )   

Backwards decelerating ribbing significantly increased perceived performance.  (Harrison, Yeo et Hudson - 2010 )   

1. Discussing with the development team to understand technical requirements.   

How this works  Camera takes the video and sends it to the server  Server reencodes the video and sends it to the app  The app displays the video and users can play it   

2. Deconstructing the waiting timeline millisecond by millisecond.   

Video player components load on the screen with a fade in transition  Interface Transition  300ms  Video plays as soon as loaded  Indeterminate waiting indicator  2s  3 - 8s   

3. Communicating and sharing the specifications with the development team.   

Step by step static states in design tool.   

Specifications document for the developers   

Optimistic Home Alarm Status Switching   

1. Trusting our API (and server) providing optimistic instant feedbacks to the user   

We don’t wait for the server to respond to visually change the status on the interface   

“But what will be the consequences of a system failure from a user perspective?”   

2. Identifying possible failure cases and acting accordingly.   

3. Informing users that something went wrong (and helping them fix it if possible)   

In case of failure: notifying the user and switching back to previous state   

GVBeestje crocodiles by Daniel Disselkoen in Amsterdam’s metro   

Instagram’s preemptive media uploading upload starts here   

Skeleton screens and progressively display content as it arrives in the browser   

Pinterest has some really nice colorful interface placeholders   

Be careful with content jumps & layout updates   

The mechanic takes photos and records small videos to explain what needs to be repaired.  Medias  00:35  00:35  Nouvelle Image  Précédent Vidéo  Privé  Frontal  00:35  Nouvelle Video  Suivant   

1. Understanding the user context and user flow to enhance experience.   

๏  Data connexion in a body repair workshop can be really slow and wifi is often bad.  ๏  Mechanics sometimes miss information because of latency.  ๏  Some users share the same device.   

2. Discussing and understanding technical scope and requirements.   

Medias  ๏  00:35  00:35  Nouvelle Image  Précédent  we need to load them again when we edit a file).  00:35  Nouvelle Video  Suivant  Medias are deleted from the device once the file is sent (so  ๏  Size, media type, number of medias is sent in a Json file,  ๏  Thumbnails are loaded from Amazon S3   

Medias  A Skeleton Grid based on the number of medias  Nouvelle Image  Précédent  Nouvelle Video  Suivant   

A gallery of spinners is never a good solution   

Medias  Media type thumbnails to fill the skeleton  Nouvelle Image  Précédent  Nouvelle Video  Suivant   

Progressively displaying media content as it loads   

Medias  00:35  Visual feedbacks for time-out and loading failures.  00:35  Nouvelle Image  Précédent  Nouvelle Video  Suivant   

No user flow interruption: users can interact with the interface and take new images while the gallery loads in the background   

4. Communicating what is expected with developers   

Invision prototype for the developers ๏  Static mockups  ๏  Timer to switch between each screen  ๏  Really limited: frame by frame animation = long and tedious   

๏  Flinto to build the pulse animation  ๏  Static mockups replaced by GIFs prepared in Photoshop (glitchy in Invision on mobile)   

Too realistic fake prototypes might backfire during user testing…   

What I learned ๏  Don’t use the same fake prototype for developers and user testing  ๏  If possible, test performance on an “coded” prototype with a real user connexion   

Documentation for the developers: ๏ ๏ ๏  Invision clickable prototype video animation of the flow written specs.   

Wait, let’s slow down a little bit…   

Do we ALWAYS need to make our interface faster?   

“It can’t be THAT fast, there must be a trick somewhere” - me, the first time I saw my bank instant notification after paying in a shop.   

Wells Fargo’s eye-scan based log-in was too fast for users, they had to slow it down.   

The Kayak Effect The “labour illusion” - users value things more when they believe effort has been put into them   

Image via Shan Shen  To make conversations with chatbots feel more natural: slow down response time and add a typing indicator   

We design and develop in privileged environments and sometimes need a “what is it like for our user” reality check.   

Our developers use the network conditioner to simulate a bad connexion on the iPhone   

Building a performant product is a team effort!   

Building Designers and developers need to communicate and work together to come up with the best solution possible.   

Perceived performance might not be the top priority on the roadmap. Be patient, start small, one step at a time.   

We can’t all be Instagram, Twitter or Pinterest… And it’s okay.   

stephaniewalter.design  @WalterStephanie  Attribution-NonCommercial-ShareAlike 4.0 International   

UX最適化の限界と心理的時間の理解

ユーザーの速度認識と満足度への影響

インターフェースの視覚的応答時間とフィードバック

待機時間におけるユーザーの期待とインジケーター

シーガルローダーとユーザーの待機体験の最適化

アニメーションとトランジションによる速度感の向上

オンデマンド監視ビデオの読み込みプロセス

楽観的UIの構築とユーザーへのフィードバック

ユーザー体験を向上させるためのコンテキスト理解

開発者とのコミュニケーションとパフォーマンス向上のための戦略

関連するスライド

TEST

TEST

いろはにABC

TEST

testslide

概要

関連するスライド

かたやまたかし＠循内さんの他の投稿スライド

UX最適化の限界と心理的時間の理解

Cheating The UX When There Is Nothing More To Optimize Pixel Pioneers 2018 — Stéphanie Walter

stephaniewalter.design @WalterStephanie UI & UX designer. Mobile enthusiast Pixel and CSS Lover. Currently working for

Objective time Psychological time (the clock) (perception of time in my brain)

ユーザーの速度認識と満足度への影響

インターフェースの視覚的応答時間とフィードバック

待機時間におけるユーザーの期待とインジケーター

シーガルローダーとユーザーの待機体験の最適化

アニメーションとトランジションによる速度感の向上

オンデマンド監視ビデオの読み込みプロセス

楽観的UIの構築とユーザーへのフィードバック

ユーザー体験を向上させるためのコンテキスト理解

開発者とのコミュニケーションとパフォーマンス向上のための戦略

かたやまたかし＠循内さんのインタビュー