@yhassyの週刊UX : 海外で話題になったUX最新情報 その11 | アドビUX道場 #UXDojo
@yhassyの週刊UX
毎週、海外で話題になっているUX関連の情報をピックアップ。今すぐに役立つ情報から、将来の動向を予感させる学びのある記事までダイジェストで紹介します。今週の気になるトピックはこちら。
ユーザーの大切な時間を守るデザイン
今日において、時間は最も重要な個人資産といっても過言ではありません。Uberはボタンでひとつで乗車できるサービスと説明できますが、タクシーへ問い合わせたり待つ時間をゼロ待つ時間が著しく減ることで、時間を作ることに成功しています。誰もが1日24時間しかないわけですから、その時間を大切に使うことができるデザインが必要とされています。
サービスだけでなく、UIデザインにも同様のことが言えます。アプリが何をしているのか分からない状態が続くと、ユーザーを無駄に待たせることになります。次の画面で何が起こるか知らせないことで、ユーザーに二度手間をさせてしまうのも、時間の浪費に繋がります。
記事ではユーザーの時間を考慮したデザインを4つ紹介しています。
- ローディングバーのように、ユーザーにどれくらい時間がかかるか知らせる演出を加える。
- InstagramのStoryのように、自動表示されるUIでもユーザーが止めたり先に進むといったコントロールができるようにする。
- Mediumのように、記事を読み終えるまでの時間を表示させることで、ユーザーが今読むのか、後で読むのか判断できるようにする。
- Google Mapsのように、時間によって地図の色を変えるような演出を加えることでアプリの利用体験をよりリアルなものにする。
機能によってユーザーの課題解決をするのもひとつですが、デザインを通して「時間がない」という課題を解決するためのUIを考えてみてはいかがでしょうか。
デザインが悪用されることもある
Stop calling these Dark Design Patterns or Dark UX — these are simply a**hole designs
ユーザーを騙すUIデザインを『ダークパターン』と呼ぶことがありますが、ついにここまで来たかと驚くようなアプローチが幾つか紹介されています。
通知が来ているように見せているアプリアイコン、スクリーンに毛が乗っているように演出してわざとスワイプさせようとする画像など、騙しの手口のオンパレード。売り上げ、ダウンロード数、アクティブユーザー数などビジネスにおける目標数値は幾つかありますが、それを達成させるためならユーザーを騙したり苦労させても構わないと思わせる手口ばかりです。アプリのでデザインだけでなく、20世紀初頭の広告や実世界の例も紹介されています。
ユーザーのために良い体験を設計するのがデザイナーの役割であると同時に、ビジネスゴールに貢献することも仕事です。両方ともデザインの仕事ではあるものの、この記事で紹介されているような短期的な成果を達成するためだけにデザインするという状態は避けるべきでしょう。
Instagram 広告に「抜け毛」のような要素を入れて、わざとスワイプさせようとしている事例。グッドアイデアという人もいるかもしれんが、バッドデザインですね。 #design https://t.co/Rl1vDUCcNt
— Yasuhisa♂️ (@yhassy) January 11, 2018
Webサイトはこう進化した
Webサイトの歴史を辿ることで、その時代の流行りや普遍的な使いやすさとは何か学ぶことができます。週刊UXその8 で「Web Design Museum」というサイトを紹介しましたが、今回紹介するMuseum of Websiteも似たようなギャラリーサイトです。Museum of Websiteが特徴的なのは企業、サービスごとに時系列で追うことができる点。紹介しているサイトの数は少ないですが、どのようにWebサイトが進化していったのかを知るには便利です。
時が経てば情報や機能も多くなるので複雑化するのかと思いきや、Amazonのように初期と比べてテキストやナビゲーションが減っている事例もあります。
CSSグラデーションをマスターするならココ
フラットデザインが好まれる現在ですが、時には立体感や触感がある演出があったほうが良い場合があります。そんなときCSSグラデーションは強い味方になるでしょう。しかし、CSSグラデーションは、コードを見ただけではどんな見た目になるかを判断するのが困難です。また、デザインツールでは表現が自由過ぎて、つくったグラデーションがCSSで再現できるのかが分かりません。
コピー&ペーストで使えるギャラリーもあります
CSSグラデーションがつくれるツールはいくつかありますが、今できることがコンパクトにまとまっているのがこちら。スマホやタブレットからも使えますし、CSSグラデーションの例もたくさん掲載されています。