きれいなアプリのデザインに対する暴言

公開: 2022-03-11

「褒め言葉を訴える、またはそれによって養われるその虚栄心から守ってください。」 –Chalmers

誇大広告で批判的なUX光線の目でデザインにインスピレーションを得たサイトをサーフィンする:)耳から煙が立ち上るのをよく見かけます。 タイトルが言うように、これは暴言ですが、あまり真剣に受け止めないでください。 私は主張しようとしています。

はい、私はこれらのデザイン展示サイトのいくつかが必ずしも実際の製品を対象としているわけではないことを知っていますが、それでも、主に「これは誰のためですか? 」、「人々は私の製品をどのように使用しますか」、「実際に使用できますか?」

最新の流行に従い、基本的なユーザビリティの慣習、UXのベストプラクティス、インタラクションデザインの基本原則を露骨に無視する表面的なアプリのデザインは、現実の世界では失敗する可能性が高いです。 幸いなことに、彼らは通常、DribbbleandBehanceの一般的にばかげたセルフパレーディングファンタジーランドを超えることはありません。

残念ながら、これらの「コンセプトデザイン」は、架空のアプリの1つの画面であり、ベニヤ、きれいな色、書体だけを気にするプリテンダーとして、アーティストとしてラベル付けされているデザイナーを永続させるためだけに使用されます。 今日では、アプリのデザインはそれをはるかに超えている必要があります。

私はUXについて話している。

現実の世界の人々が実際にこれらのアプリを使おうとすると、50%以上がそれを行うのに苦労し、その後混乱して諦めることを保証します。

天気アプリ-悪いアプリのデザイン
誰がまだ別の天気アプリを必要としませんか? ユーザーがそれを使用する方法の手がかりはありません。 (DribbbleのJona Dinges)

塩の価値があり、ゲームを向上させたいデジタル製品デザイナーは、エゴをドアに残し、不必要な繁栄、自己奉仕的な公開パレード、無意味な視聴者の誘惑を避けることが不可欠であることを知っています。 #UXFail!

旅行アプリのデザイン-悪いアプリのデザイン
派手なGIFアニメーションの量は、隠されたジェスチャーの相互作用、無意味なアイコン、低コントラストのテキストなど、不適切に設計されたアプリの深刻なユーザーエクスペリエンスの問題を修正することはできません。 (DribbbleのArunrajによる旅行アプリ)

お世辞のためのユーザビリティを放棄する

デジタル製品の設計が市場で成功するためには、優れたユーザーエクスペリエンスが必須です。 確かに、美学—見栄えと感触の良いデザインは重要ですが、それらは使用可能な製品を補完する最後の仕上げであり、使用するのも楽しいものです。 使いやすさを放棄しながら、美的完成度だけを追求することは、最終的には敗者のゲームです。

「実用的なテクノロジーの第一人者」と呼ばれることの多いドン・ノーマンが言ったように、「優れたデザイナーは楽しい体験を生み出します」。

楽しい体験とは、流動的でシームレスな相互作用と予測的な体験を提供しながら、摩擦を最小限に抑える体験です(つまり、物事を魔法のように見せます。適切なもの、適切なタイミング、適切な方法)。

そこにたどり着く方法は、確立されたベストプラクティスや設計規則を無視し、単にファサードに焦点を当てることではありません。 それは明らかです、ドリブルはどもります:1)あなたはあなたのユーザーを理解していません、そして2)あなたは流行をコピーしています。

モバイルアプリのUXデザインのベストプラクティス
あなたのデザインはこれらの質問をしていますか?

危険にさらされている慣習を無視する

デジタル製品設計であろうと工業デザイン(たとえば、自動車や自転車)であろうと、設計の慣習は、人間の行動、力学、物理学、科学、および広範な研究に根ざしています。 彼らは、私たちが彼らに慣れているので、ベストプラクティスと物事がどのように機能するかについての人間の期待に従い、長年にわたってそれらの慣習に従ってきました。 これらは試行錯誤によって解決された慣習であり、時間の経過とともに非常に効果的であることが証明されています。 進化に少し似ています。

設計規則を無視したり違反したりするのは愚かでやや傲慢です。 それらは基本的なものであり、私たちがイノベーションを起こすための基盤として機能します。 それは何が期待されているかについてです。 それらがなければ、あなたは人々の地獄を悩ませる危険があります。 すべての自転車、すべてのドアハンドル、またはすべての車のペダルとステアリングホイールが、純粋に「革新」の名の下に、異なる働きをしたと想像してみてください。

2つの言葉:完全な騒乱。

ユーザーインターフェイスは冗談のようなものです。 あなたがそれを説明しなければならないなら、それはうまくいきません。

モバイルUXデザインのヒントとコツ
Dribbbleの別のアプリデザイン。 (DribbbleのAaron 1991)

ヒューリスティックに注意してください

使いやすい製品を目指して設計されたアプリは、確立された設計規則、基本的なユーザビリティガイドライン、インタラクションデザインの原則(とりわけ)に従い、フライングカラーでヒューリスティック評価に合格します。 (「ヒューリスティック」は、特定のユーザビリティガイドラインではなく、大まかな経験則であるためです。)

アプリの設計が現実の世界でうまく機能するためには、20年間ユーザーエクスペリエンス分野の第一人者であるニールセンノーマングループによって定義された、ユーザーインターフェイス設計の10のユーザビリティヒューリスティックを遵守する必要があります。 これらは:

  1. システムステータスの可視性
  2. システムと現実世界の一致
  3. ユーザーコントロールと自由
  4. 一貫性と基準
  5. エラー防止
  6. 想起ではなく認識
  7. 使用の柔軟性と効率
  8. 美的でミニマリストなデザイン
  9. ユーザーがエラーを認識、診断、および回復できるようにする
  10. ヘルプの利用可能性(これは「クイックツアー」またはウォークスルーの場合があります)

インタラクションデザインのこれらの10の一般原則について詳しくは、こちらをご覧ください。

イノベーションの名の下に夢中

多くの場合、アプリのコンセプト画面は、Dribbbleの毎日のホットショットセクションに進むことを目的として、ポートフォリオ展示サイトで多くのいいねを探しているデザイナーによって設計されています。 いくつかの派手でミニマリストなUIデザインは製品ではありません。 これは、車の残りの部分がどのように見えるか、または実際のシナリオでどのように機能するかについてのアイデアを提供せずに、車のドアを設計することに似ています。

モバイルアプリの設計モバイルUI設計のベストプラクティス
Dribbbleのトレーディングアプリのデザイン。 ミステリーアイコンと低コントラストのテキストでいっぱいの1つではなく2つのメニューを備えています。

誤解しないでください! デザインの革新が必要です。 あらゆる分野や創造的な領域が繁栄することは健康的で重要です。 しかし、それは優れたUXを犠牲にして起こるべきではありません。 ここで区別して、それを設計実験と呼びましょう。 クリーンでミニマリストなデザインという考えの下で、単に異なってクールになりたいだけで、これらのサイトをパレードするいわゆる革新的なデザインの多くは、基本的なユーザビリティを犠牲にします。

使いやすさ101

優れたユーザーエクスペリエンスの基盤であるユーザビリティは、ユーザーインターフェイスの使いやすさを評価する品質属性です。 使いやすさという言葉は、設計プロセス中の使いやすさを向上させるためのプラクティスも指します。

アプリが有用かどうかは、使いやすさだけでなく実用性の観点からも定義されます。 ユーティリティは、ユーザーに必要な機能を提供します。 使いやすさは、これらの機能をどれだけ簡単かつ快適に使用できるかということです。 したがって、これらのユーザビリティの基本的な信条を無視する派手なアプリのデザインは、定義上役に立たないことになります。

デザイナーがアプリのナビゲーションをデザインするための革新的で興味深い方法を探していることは理解できます。 しかし、予期しないものと使用できないものの間には微妙な境界線があります。 ナビゲーションデザインで考慮すべき3つのことは、一貫性、ユーザーの期待、およびコンテキストの手がかりです。 たとえば、eコマースのアプリのコンセプトデザインがどれほど凝っていても構いません。 ユーザーが製品を見つけられない場合、購入することはできません。

便利なデザイン

スティーブ・ジョブズが言ったように、「それはそれがどのように見えるか、そしてどのように感じるかだけではありません。 デザインはそれがどのように機能するかです。」

彼は便利なデザインについて話していました。

デザイナーが物事がどのように機能するかについての人のメンタルモデルをいじりすぎると、アプリは失敗します。 ユーザーのメンタルモデルと概念モデルの間に大きな不一致がある場合、アプリは乾杯です。 メンタルモデルは、その名前が示すように、物事がどのように機能するかについての理解を表す、人々の心の中の概念モデルです。

インタラクションデザインの最も基本的な原則の1つは、UIが有用であるためには、UIにシニフィアンが必要であるということです。 ユーザーがUIに、利用可能なアクションまたはユーザーが利用できるジェスチャー操作を示す視覚的な手がかりがない場合(シニフィアンと呼ばれます)、製品設計はDOAです。

デザイナーとしてのあなたがあなたの製品に夢中になっているかもしれないのと同じくらい、ユーザーはもっと有用性に関心を持っています。 彼らはあなたのアプリを学びたくないし、UIで物事をスワイプしようとして何が機能するかを確認するために、発見や実験の旅に出たくないのです。 20年以上のユーザビリティコンサルタントであるSteveKrugは、彼の著書「 Do n't Make Me Think 」で、「[ユーザビリティ]は最優先の原則であり、デザインが機能するかどうかを決定する際の究極のタイブレーカーです」と述べています。

占星術アプリモバイルアプリのデザイン
このアプリをどのように使用しますか? (DribbbleのBrandonTerminiの占星術アプリ)

確かに、70年代のブラウンの伝説的なドイツ人デザイナーであり、アップルのすべてのものにインスピレーションを与えたディーター・ラムスは、次のように述べています。

私たちが毎日使用する製品は私たちの人と私たちの幸福に影響を与えるため、製品の美的品質はその有用性に不可欠です。 しかし、うまく実行されたオブジェクトだけが美しくなります。

言い換えれば、設計はすべてのレベルで機能する必要があります。

ミニマリストのモバイルアプリのデザイン
ディーター・ラムスが設計したブラウンのラジオ。 真の機能的ミニマリズム。

ディーター・ラムスによると、優れたデザインの10の戒めは次のとおりです。

モバイルアプリのデザインのミニマリズム

視覚的なデザイン、つまり美的感覚は、UXデザインの1つの側面にすぎないことを忘れないでください。 これは、UXデザインプロセスでそれ以前に行われたすべてのことを高める必要がある最後のレイヤーです。つまり、ビジネス目標の定義、コアユーザー(ペルソナ)の特定、ユーザーリサーチ、スケッチ、アイデア、ワイヤーフレーミング、モックアップ、プロトタイプ、およびユーザビリティテストです。 。 これは、感情のデザインに合わせて全体的なユーザーエクスペリエンスを向上させる最後のベニヤです。

精神的な努力を減らす

モバイルアプリの設計のベストプラクティス
ほとんどの人は、ラベルのないアイコンが何を意味するのかわからず、ヘッダーにコントラストがないと、ほとんどのユーザーがナビゲーションを見ることができなくなります。 (eコマースアプリファンシー)

悪いデザインが機能している状態で、デザイナー夫妻は、漠然としたアイコンや象徴性を解読して解釈するように人々に求め、それによって彼らの認知的負荷(作業記憶で使用される精神的努力の総量)を増やします。 一方、優れたユーザーエクスペリエンスの設計は、認知的負荷を軽減します。 このタイプの利己的なデザイン(ええ、私はそこに行きました)は、人々の進路に障害を投げかけ、摩擦と欲求不満を増大させます。 それは本当に目標ですか?

モバイルアプリのデザインメンタルモデルのUIデザイン
「オンとオフ」とはどういう意味ですか? アイコンは何をしますか? このデザインは、ユーザーに解釈と学習を求めすぎています。 (Stan Yakusevich on Behance)

デザイナーは、ユーザーがアプリのメンタルマップを作成し、物事がどこにあり、それらをどのように使用するかを直感的に理解できるように、明確なラベル付け(リンクとボタン)と明確な標識(明確なナビゲーション)を提供する必要があります。 ナビゲーションは明確で、タスク指向で、論理的である必要があり(たとえば、画面コントロールはそれを使用する方法を提案します)、その場所は全体を通して一貫している必要があります(たとえば、メニューバー上)。

ユーザーがスワイプしてターゲットを簡単にタップできる大きさにできる場合は、ユーザーがタップする場所を明確にします。 エラーを防ぎます。 何かが何を意味するのかを人々に推測させないでください。 怠惰にならないでください。 ハンバーガーとケバブのメニュー(3つのドット)はナビゲーションを隠し、コンテンツを見つけにくくするため、避けてください。 特に、ハンバーガーメニューのようにも見えないハンバーガーは避けてください。 はい、スペースには限りがありますが、タブ(上から下)とハンバーガーメニューの組み合わせは、単一のハンバーガーよりもはるかに優れていることが証明されています。

モバイルアプリデザインハンバーガーメニュー
上部にハンバーガーのようなメニュー。 解釈が必要なラベルのないアイコン。 (Dribbbleのxiaoniaojiuの会計アプリ)


最高のモバイルアプリのデザイン
Uberでさえ、他の点ではうまく設計されたアプリの大きなUX犯罪者です。 あのハンバーガーメニューが見えますか? ほとんどの人はどちらもしません。


悪いモバイルアプリのデザイン
Turoは、タブバーにラベルのないアイコンがあるもう1つの大きな犯罪者です。 それらの意味についてはゼロの手がかりがあります。


モバイルアプリのデザインミス
現実の世界のほとんどの人は、このアプリの使い方を理解しようとするのは本当に難しいでしょう。 (Tubikによる家計簿アプリ)

完璧な世界ではありません

あなたの製品がユーザーの手に渡った場合、ユーザーは物を見つけて実際に使用できるでしょうか? これらの画面の設計に使用したような超大型のセットアップにアクセスできない場合があります。 ユーザビリティとアクセシビリティ(視覚障害、身体障害、認知障害)についてもう一度考えてみてください。 国勢調査のデータによると、米国では少なくとも19%の人が障害を持っており、その割合は発展途上国でより高くなる可能性があります。 視力が完全ではない人があなたのアプリを手に取った場合、彼らはそれを使用できますか?

あなたのデザインは「指に優しい」ですか、それとも文字通り使うのが面倒ですか? アプリ画面のさまざまな部分に到達するために、人々はどのくらい緊張する必要がありますか? 画面の四隅をジャンプさせるのではなく、ユーザーの指先の下にアクション可能なアイテムを配置する、ユーザーのタスクフローを検討していますか? デザインは本当にタッチに準拠していますか? あなたは携帯電話を持っている手の下の隠された領域を説明しましたか?

Luke Wroblewskiが大画面スマートフォンの設計で指摘しているように、大画面での設計のパフォーマンスを検討しましたか?

より良いUXのためのより良いモバイルアプリのデザイン
モバイル画面が大きくなると、特定のUI要素にアクセスしにくくなります。

あなたのデザインは、幅44ピクセル、高さ44ピクセルの最小ターゲットサイズというAppleのiPhoneヒューマンインターフェイスガイドラインの推奨事項に本当に準拠していますか? MicrosoftのWindowsPhoneUIデザインおよびインタラクションガイドでは、タッチターゲットサイズを34ピクセル、最小タッチターゲットサイズを26ピクセルにすることを推奨しています。

テキストと背景のコントラストを最小限に抑えたり、判読できない小さなテキストに夢中にならないでください。デザインが「ヒップでクリーン、そしてミニマル」になります。

モバイルアプリのUXデザイン
要素間のコントラストが不足しているため、ほとんど判読できません。 3つの場所にあるアイコン、一部はラベルなし。


モバイルアプリのデザインが悪いデザイン
コントラストが低いため、ナビゲーションを読み取ることはほとんど不可能です。 (DribbbleのRonoによるスピードトラッカーアプリ)


より良いUX

Spotifyモバイルアプリのデザイン
Spotifyのアプリのデザインはすっきりとしていて、ラベルが付いています。 その主な機能はすぐに理解されます。 (しかし、その厄介なケバブメニューがあります!)


スターバックスモバイルアプリのUXデザイン
スターバックスのデザイナーは怠け者ではありません。 ほら、ハンバーガーメニューはありません! デザイナーはアイコンを廃止し、代わりにシンプルなテキストラベルを選択しました。


優れたモバイルアプリのデザイン
デザイナーがアイコンでクリエイティブになったとしても、明確にラベル付けされていれば、当て推量はありません。 (ToptalデザイナーのMohammed Bilalによるアプリデザイン)

Moのより良いデザインが必要

それで、良いデザインとは何ですか? その議論は本を埋めることができますが、一般的に言えば、「優れたデザイン」とは、そのデザインのユーザーにとってすべてがまとまるときです。

つまり、デザインが「優れた」ものであり、ユーザーにとって有用であるためには、成功するために提供しなければならない複数のレベルと要因を考慮に入れる必要があります。

デザインのトレンドは行き来しています。 平均的なデザインの傾向は1、2年しか続きません。 UXデザインの基盤である優れたユーザビリティはここにあります。

優れたUXの7つの要素に従って設計された製品は、設計トレンドよりも長持ちし、保証されます。 優れたユーザビリティ、UXのベストプラクティス、インタラクションデザインの規則、およびユーザーエクスペリエンスに影響を与える要素に注意を払う設計者は、そうでない設計者よりも大きな影響を与えます。 一日の終わりに、彼らは報われ、彼らのデジタル製品はより広く受け入れられ、市場で成功するでしょう。

モバイルアプリのインタラクションデザイン
ユーザーエクスペリエンスに影響を与える7つの要因。 (インタラクションデザイン財団から)

デザイナーとして、UXを上手に使いたい場合、つまり、きれいなアプリだけでなく、便利なモバイルアプリやデスクトップアプリを作成したい場合は、少なくともUXの基本を学ぶために時間を費やしてください。 UXブログをフォローすることから始めて、Toptal Design Blog、UX Magazine、UX Matters、UserTesting、uxdesign.cc、UX Design Weekly、InteractionDesignFoundationなどのニュースレターやオンライン出版物を購読します。

生きている、呼吸している参加者、つまり実在の人々を対象に実施されたユーザー調査を読んでください。 彼らが言うように、数字は嘘をつきません。 他のすべては仮説と仮定です。

TwitterでUXのソートリーダーをフォローしてください。 UXの記事とホワイトペーパーを読んでください。クリームデラクリームはニールセンノーマングループとアダプティブパスです。

Mediumは、UX/UIデザインの記事をオンラインで読むのに私のお気に入りの目的地の1つです。 世界中のデザイナーがこれを使用して、デザイン、ユーザーエクスペリエンス、使いやすさ、および優れたデジタル製品の作成と構築に関連するその他のトピックについて読んでいます。 Mediumでフォローするデザイナーは次のとおりです。

私が知っているすべてのUXerが本棚に置いている基本的で古典的な本のいくつかを読んで、それらを経典のように扱ってください。

  1. ドン・ノーマンのデザインに関する独創的な本The Design of Daily Things
  2. ドン・ノーマンの感情的なデザイン:なぜ私たちは日常のことを愛する(または嫌う)のか
  3. スティーブ・クリュッグの考えさせないで
  4. ジェフ・ゴセルフのリーンUX:リーン原則を適用してユーザーエクスペリエンスを向上させる
  5. ヤコブ・ニールセンのユーザビリティエンジニアリング
  6. スーザン・ワインシェンクのすべてのデザイナーが人々について知っておくべき100のこと

ユーザビリティガイドライン、インタラクションデザインの原則、およびUXのベストプラクティス(調査、ホワイトペーパー、記事など)に関する有益なオンラインリソースをお読みください。

  1. インタラクションデザインの第一原理
  2. NNGroupからの(複数のレポートにわたる)2,397のユー​​ザビリティガイドラインのフルセット
  3. NNGroupのユーザーインターフェイス設計のための10のユーザビリティヒューリスティック
  4. Baymard Instituteの記事:BaymardはeコマースWebサイトでの行動を研究しています
  5. UXマスタリー記事:UXのすべて

そして最後に、次の5つのUXポッドキャストをiTunesライブラリに追加します。

  1. UXポッド:UXデザイナーとの話し合いと一般的なユーザビリティについて
  2. Inside Intercom:大手企業のトップデザイナーへのインタビュー
  3. ビジネス、テクノロジー、ユーザーのバランスをとることに情熱を注ぐ人々のためのUXポッドキャスト
  4. UIEポッドキャスト:デザインの世界に関するユーザーインターフェイスエンジニアリングからの洞察
  5. True North:デザインのテストと調査に焦点を当てたデザインストーリーを明らかにする

•••

Toptal Designブログでさらに読む:

  • UIデザインのベストプラクティスとよくある間違い
  • 空の状態–UXの最も見過ごされている側面
  • シンプルさが鍵–最小限のWebデザインを探る
  • モバイルインターフェースのヒューリスティック原則
  • 読みやすさのための設計–Webタイポグラフィのガイド