今まで誰も教えてくれなかった、モバイルとウェブアプリのUIデザインの12の秘訣
公開: 2016-02-28[ Proto .io は、起業家や新興企業が実際のアプリのように見える完全にインタラクティブで現実的なプロトタイプを作成するために使用するモバイル アプリのプロトタイピング ツールです。]
7 人の UI デザイナー、開発者、起業家に、苦労して学んだ、またはたまたまキャリアの中で身につけた、モバイルおよび Web アプリの UI 設計の秘訣を尋ねました。 これらのヒントについて誰も教えてくれなかったか、彼らが問題を持ち出したときに誰もそのことを知らなかったようです。 いずれにせよ、試行錯誤によって学ぶ必要のない 12 のことを紹介します。
ダッフィーのデザインの秘訣 トップ 3
John Geletka は、30 年以上のデザイン経験を持つエージェンシーである Duffy (@duffydesignx) のデジタル戦略担当副社長です。 彼が何年にもわたって習得したいくつかのトリックを次に示します。
2 は魔法の数です。
「レスポンシブ デザインでは、モバイルの縦向き (320px) とデスクトップ (1200px) の 2 つの画面を同時にデザインします。 これにより、プロセスが大幅に高速化されます」と Geletka 氏は言います。
必要最小限の設計から始めます。
「最初はすべての機能、付加機能を減らします。 不要なものを片付けて、アプリの目的に集中してください」と Geletka 氏は言います。 「つまり、最初から共有、保存、およびすべての統合をデザインに追加しないでください。 主要なアイデアを必ず書き留めてください。」
ペンを手に取ることを恐れないでください。
「デジタル ツールは優れていますが、紙の上でも 10 分でより多くのことができる場合があります」と Geletka 氏は言います。 「行き詰まったり時間がない場合は、紙を使用してください。」
このWebアプリUIデザインのトリックでバランスをとる
Brandon Termini は、Handsome (@HandsomeMade) の創設者兼クリエイティブ ディレクターです。この会社は、「意図的に美しく楽しい」Web アプリの UI デザインとデジタル製品の作成に取り組んでいます。
正しい光学ウェイトを使用してください。
「インターフェースを成功させるには、バランスが非常に重要です。 適切なバランスにより、ユーザーは意図したとおりにアプリを簡単にスキャンできます」と Termini 氏は言います。 「インターフェイスでさまざまなアイコンを使用するときに、このルールが最も頻繁に破られていることがわかります。 いくつかのアイコンは横方向に重み付けされており、他のアイコンは縦方向に重み付けされており、それらを組み合わせたときに均等にバランスが取れているように感じるようにするのが私たちの仕事です。」
光学重量と再生ボタン
「再生ボタンをデザインする場合、その答えは、円の内側に水平方向と垂直方向の中心に正三角形を貼り付けることではありません。 確かに、幾何学的には中央に配置されていますが、三角形は高さが大きいため、光学的に左側が重く感じられます」と Termini 氏は言います。 「心配しないでください。これを修正するには、2 つの方法があります。三角形をわずかに左に移動して、目が中心に見えるようにするか、三角形の幅を少し小さくして、すべての辺が均等に見えるようにします。」
Web アプリの UI デザインからモバイルまで
次の 3 つのモバイルおよび Web アプリの UI デザインの秘訣は、Cramer-Krasselt (@cramerkrasselt) のバイス プレジデント兼ユーザー エクスペリエンス戦略ディレクターである Christian Dodd とクリエイティブ テクノロジー ディレクターである Nathan Koch によるものです。 Cramer-Kasselt は米国で 2 番目に大きな独立系広告代理店であり、Porsche、Corona Extra、Heinz などのクライアントを抱えています。Dodd と Koch は豊富な経験を基に、次のようなアドバイスを提供してくれます。
モバイルに移植するときは、Web ホバー インタラクションを忘れずに、設計の早い段階でそれらに対処するための明確な計画を立ててください。
「デスクトップでホバー状態の背後に隠れているコンテンツは、モバイルではいくつかの方法で対処できます。ページ上で直接、またはタッチの背後に隠れます。 デスクトップのホバー イベントを処理するための 1 つのソリューションは、すべての場合に機能しません」と Dodd と Koch は言います。 「説明的/実用的なコンテンツは、ページに表示されるように浮かび上がることでメリットが得られることが多く、探索的なコンテンツはタッチの背後にあるほうが理にかなっていることがよくあります。 一般に、ユーザーがすべてのデバイスでより快適にスクロールできるようになるにつれて、ホバー状態の背後にコンテンツを隠したり、ウィジェットを非表示/表示したりする必要性がますます少なくなっています。
あなたにおすすめ:
反営利条項はインドのスタートアップ企業にとって何を意味するのか?
Edtech スタートアップがインドの労働力のスキルアップと将来への準備をどのように支援しているか...
今週の新時代のテック株：Zomatoのトラブルは続き、EaseMyTripはスト...
インドの新興企業は資金調達を求めて近道をする
デジタル マーケティング プラットフォームの Logicserve が 80 億ルピーの資金を調達し、LS Dig...
レポートは、Lendingtechスペースに対する新たな規制精査を警告しています
動画の自動再生をモバイル Web で機能させようとしても、通常は価値がありません。
「モバイル OS の開発者は、理由により動画の自動再生を許可していません。 一般に、オーディオとビデオは、モバイルのユーザーにとってより破壊的です」と Dodd と Koch は言います。 「モバイル ユーザーは、メディアを消費するために意図的な選択をすることに慣れています。」
レスポンシブ デザインには、ブラウザを縮小するだけではありません。
Dodd と Koch は次のように述べています。 「デスクトップ Web サイトでのタッチ イベントを推測できないとは思わないでください。モバイル インタラクションの詳細は、見た目よりも洗練されています。」
3 の法則には、あなたが思っている以上のものがあります
Karolyn Hart は、InspireHUB (@Inspire_HUB) の最高執行責任者であり、市場で最も初期のエンタープライズ グレードのモバイル Web アプリの 1 つである IHUBApp の作成者です。
Web アプリのすべての UI デザイン要素を 3 つのグループにまとめるようにしてください。
「私たちは、クライアントのためにインターフェースに自信を持たせる方法を研究しているときに、『3 のルール』に出くわしました。 私たちのプラットフォームの V1.0 は的を射ていませんでした」と Hart 氏は言います。 「調査によると、自信を高める最適な数は 3 です。 3人未満だと自信がなく、3人を超えると圧倒されます。」
Hart 氏は次のように述べています。 ルールは私たちのツールを変えました。 私たちのバックエンドは、デザインのシンプルさに対応するために非常に洗練されていますが、見返りはそれだけの価値があります!」
ジェスチャーをシンプルかつ直感的に保つ
Jason Suriano は、Rocketfuel Productions Inc. (@TrajectoryIQ) の創設者兼 CEO です。 モバイルおよび Web アプリの UI デザインで 13 年以上の経験を持ち、Discovery Communications などの企業向けにオンラインおよびモバイル ベースのプロジェクトを作成してきた Suriano は、かなりの数のプロのヒントを見つけました。 これが彼のお気に入りです：
モバイルでは、すべての指がぎこちないと仮定します。
「モバイル ゲームをデザインする際に実装した 1 つのトリックは、スタート画面全体をタップ可能な領域にすることです。 これが意味することは、ユーザーがスタート ボタンをタップして失敗した場合でも、アプリは次のゲーム プレイ画面をロードし、ユーザーがアプリを続行できるようにすることです」と Suriano 氏は言います。
「モバイルの UI/UX はタップ、ダブルタップ、スワイプ、ジェスチャによって定義されるため、スタート画面のような簡単なものを設計する際に失敗すると、ユーザーは立ち往生したりイライラしたりして、ホームボタンを押してアプリを終了せざるを得なくなる可能性があります」と彼は付け加えます。 .
新しい Web アプリの UI 設計の秘訣に柔軟に対応する
Nolan Kier は、ニューヨークに本社を置くアプリ開発会社 Messapps (@Messapps) のプロジェクト マネージャー兼ビジネス開発アソシエイトです。 「Messapps は 3 年弱前に設立されましたが、すでにアプリ開発分野で最も評判が高く革新的なアプリ開発会社の 1 つに急速に成長しています」と Kier 氏は言います。わずか 3 年間でデザイン トリックを習得しました。」
仕事を成し遂げるための新しい、より良い方法を研究し続けてください。
「問題を調査するか、特定の開発問題を深く掘り下げて、どのような答えが得られるかを判断することで、タスクを完了するための多くのトリックや新しい方法を学びました」と Kier 氏は言います。 「この例には、新しいコード スニペットを LaTeX に書き込んでクールなドキュメントを書く方法を学ぶことが含まれます。これは、プログラミング スタイル/フォーマットを備えたテキスト エディターに似たものです。 また、MacOS 用の Mathcad に似た Mathematica には、ユーザーがこのソフトウェアを使用して難しい 3D スキームを作成できるようにする、巧妙な隠し機能がありました。」
「デザインに関しては、アルファ チャネルの変更などを使用してフレームを圧縮する方法や、カスタム アルゴリズムを使用して個々の画像を圧縮する機能に出くわしたことが、プロセスを支援する小さなトリックでした」と Kierk 氏は言います。 「Web アプリの UI 設計・開発事業に携わるには、テクノロジーの進化に合わせたイノベーションが必要です。 その結果、当社のデザイナーと開発者は社内外のプロセスを常に見直し、「一からやり直して」設計と開発の新しい方法を発見しています。」
一緒に働くのにふさわしい人を見つける
Robert Pieta は、状況に応じた提案を提供するスマートな iOS キーボードである Porter Key (@PorterKeyboard) の iOS エンジニア兼 CEO です。 エンジニアと起業家の両方としての彼の最大のアドバイスは次のとおりです。
開発者デザイナー、またはデザイナー開発者を探します。
「両者を理解し、上級経験を持つ人は、コミュニケーションの問題を解決し、プロジェクトを予定どおりに進めるのに役立ちます」と Pieta 氏は言います。 「これには主に 2 つのメリットがあります。 まず、設計と開発の経験を持つ人は、コミュニケーションのギャップを埋めるのに役立ちます。 設計と開発の両方に、独自の重要な用語、スラング、暗黙の前提、コア テナントがあります。 両方の世界を知ることで、コミュニケーションの問題を先制的に捉えることができます。」
「第二に、設計経験のある開発者は、1 人の開発者、1 人のデザイナー、またはプロダクト マネージャーよりも、複雑さとリソースの要件をはるかに正確に見積もることができます」と Pieta 氏は付け加えます。 「多くの場合、小さな設計変更が開発時間の大幅な短縮につながります。 これは、特定の設計パラダイムが事実上事前に作成されているモバイルで特に当てはまります。 どのカスタマイズが実装しやすく、どのアニメーションが使いやすいかを理解することは、開発者とデザイナーの両方がプロセスを楽しめるようにするのに役立ちます。」
「一部の既存のチームは、開発者やデザイナーとのスタンド ミーティングでこれらの問題を解決できると主張できますが、多くの場合、そうではありません。 会議が短すぎて、暗黙的な設計の仮定、以前のユーザー調査、既存のコード アーキテクチャの決定、言語の選択、およびプロジェクトを定義するその他の選択を正確に掘り下げることができません。 両方の世界で経験を積んだ人だけが、このギャップを迅速かつ効果的に埋めることができます。」
そしてもう 1 つ私たちからのヒント: 適切なプロトタイピング ツールを使用する
一部のモバイルおよび Web アプリの UI デザインの秘訣は教えることもできますが、中には経験を通じて難しい方法でしか学べないものもあります。 幸いなことに、今日のデザイナーや開発者は、彼らが言うように、巨人の肩に専門知識を構築することができます。
[ Proto .io は、起業家や新興企業が実際のアプリのように見える完全にインタラクティブで現実的なプロトタイプを作成するために使用するモバイル アプリのプロトタイピング ツールです。]