apeescape2.com
  • メイン
  • プロジェクト管理
  • ツールとチュートリアル
  • デザイナーライフ
  • 計画と予測
Uxデザイン

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

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

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

はい、私はこれらのデザイン展示サイトのいくつかが必ずしも実際の製品のためのものではないことを知っていますが、それでも私はそれらが主に主な質問をすることによってデザインへの思慮深いアプローチを反映する必要があると言います。 」、「人々は私の製品をどのように使用しますか」、「実際に使用できますか?」



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

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

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

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

天気アプリ-悪いアプリのデザイン

もう1つの天気アプリを必要としないのは誰ですか?それを使用する方法のユーザーへの手がかりはありません。 (( ジョナ・ディンジス ドリブル)

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

スプリングブートレストoauth2の例

旅行アプリのデザイン-悪いアプリのデザイン

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

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

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

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

楽しい体験とは、流動的でシームレスな相互作用を提供しながら、摩擦を最小限に抑え、 予想される経験 (つまり、物事を魔法のように見せること。正しいこと、正しい瞬間、正しい方法)。

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

モバイルアプリのUXデザインのベストプラクティス

あなたのデザインはこれらの質問をしていますか?

あなたの危険にさらされている慣習を無視する

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

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

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

ユーザーインターフェイスは冗談のようなものです。説明しなければならない場合、それは機能しません。

モバイルUXデザインのヒントとコツ

Dribbbleの別のアプリデザイン。 (( アーロン ドリブルに関する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が彼の本で述べたように、 考えさせないで 、「[ユーザビリティ]は最優先の原則であり、デザインが機能するかどうかを決定する際の究極のタイブレーカーです。」

占星術アプリモバイルアプリのデザイン

このアプリはどのように使用しますか? (占星術アプリから ブランドンテルミニ ドリブル)

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

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

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

ミニマリストのモバイルアプリのデザイン

ディーター・ラムスが設計したブラウンのラジオ。真の機能的ミニマリズム。

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

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

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

精神的な努力を減らす

モバイルアプリの設計のベストプラクティス

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

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

モバイルアプリデザインメンタルモデルUIデザイン

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

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

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

モバイルアプリデザインハンバーガーメニュー

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


最高のモバイルアプリのデザイン

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


悪いモバイルアプリのデザイン

Turoは、タブバーにラベルのないアイコンがあるもう1つの大きな犯罪者です。それらの意味については何の手がかりもありません。


モバイルアプリの設計ミス

現実の世界のほとんどの人は、このアプリの使い方を理解しようとするのに本当に苦労するでしょう。 (住宅予算アプリ トゥビック )

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

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

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

ルーク・ウロブレスキーが指摘するように 大画面スマートフォン向けの設計 、デザインが大画面でどのように機能するかを検討しましたか?

より良いUXのためのより良いモバイルアプリのデザイン

モバイル画面が大きくなると、特定のUI要素にアクセスしにくくなります。

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

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

モバイルアプリのUXデザイン

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


モバイルアプリのデザインが悪いデザイン

コントラストが低いため、ナビゲーションを読み取ることはほとんど不可能です。 (スピードトラッカーアプリ ロノ ドリブル)


より良いUX

Spotifyモバイルアプリのデザイン

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


スターバックスモバイルアプリのUXデザイン

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


優れたモバイルアプリのデザイン

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

Moのより良い設計が必要

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

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

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

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

モバイルアプリのインタラクションデザイン

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

デザイナーとして、UXを上手に使いたい場合、つまり、きれいなアプリだけでなく、便利なモバイルアプリやデスクトップアプリを作成したい場合は、少なくともUXの基本を学ぶために時間を費やしてください。 UXブログをフォローすることから始めて、ニュースレターや次のようなオンライン出版物を購読します。 ApeeScapeデザインブログ 、 UXマガジン 、 UXの問題 、 UserTesting 、 uxdesign.cc 、 UXデザインウィークリー 、 または インタラクションデザイン財団 。

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

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

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

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

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

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

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

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

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

•••

ApeeScapeデザインブログの詳細:

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

エンタープライズクライアントサービスディレクター、グローバル成長市場

その他

エンタープライズクライアントサービスディレクター、グローバル成長市場
Apache Sparkストリーミングチュートリアル:Twitterのトレンドハッシュタグの特定

Apache Sparkストリーミングチュートリアル:Twitterのトレンドハッシュタグの特定

データサイエンスとデータベース

人気の投稿
Android開発のためのReactNativeに飛び込む
Android開発のためのReactNativeに飛び込む
アジャイルプロジェクト管理におけるソフトウェアコストの見積もり
アジャイルプロジェクト管理におけるソフトウェアコストの見積もり
ソウルハイパーサイクルと新しいフィットネスブティックの波
ソウルハイパーサイクルと新しいフィットネスブティックの波
アンサンブル手法:改善された機械学習結果を生成するためのエレガントな手法
アンサンブル手法:改善された機械学習結果を生成するためのエレガントな手法
Bootstrapとは何ですか?何を、なぜ、どのように行うかについての短いブートストラップチュートリアル
Bootstrapとは何ですか?何を、なぜ、どのように行うかについての短いブートストラップチュートリアル
 
エンタープライズ担当副社長
エンタープライズ担当副社長
ブログを高コンバージョントンネルに変換するための5ステップのプロセス
ブログを高コンバージョントンネルに変換するための5ステップのプロセス
ブロックチェーンテクノロジーの説明:ビットコインのブースト
ブロックチェーンテクノロジーの説明:ビットコインのブースト
ダムを構築し、スマートにリファクタリングする:Ruby onRailsコードから問題をマッサージする方法
ダムを構築し、スマートにリファクタリングする:Ruby onRailsコードから問題をマッサージする方法
デザインライセンスは答えではありません
デザインライセンスは答えではありません
人気の投稿
  • SQLクエリのパフォーマンスチューニングのヒント
  • それらにお金が付いている無料のハッキングされたクレジットカード2017
  • スタートアップでCFOは何をするのか
  • Angularjsの使用を開始する
  • C ++でできること
  • デザインの5つの基本原則
  • セレンスクリプトのページオブジェクトモデル
カテゴリー
製品の担当者とチーム 計画と予測 プロセスとツール 人とチーム Webフロントエンド デザイナーライフ 収益と成長 設計プロセス 収益性と効率性 ブランドデザイン

© 2021 | 全著作権所有

apeescape2.com