ワイヤーフレームの学習

May 08 2022
間もなく開始するUX/UIデザインブートキャンプの事前作業の一環として、選択したアプリのフローをリバースエンジニアリングすることに挑戦しました。演習を行うことによるこの学習の結果は、Figmaで構築されたワイヤーフレームのプロトタイプであると想定されていました。

間もなく開始するUX/UIデザインブートキャンプの事前作業の一環として、選択したアプリのフローをリバースエンジニアリングすることに挑戦しました。演習を行うことによるこの学習の結果は、Figmaで構築されたワイヤーフレームのプロトタイプであると想定されていました。目標は、ワイヤーフレーム(アプリまたはWebサイトのフローの単純な視覚的表現で、目標に気を取られることなく他の人が理解できるように十分な詳細を含む)の作成方法に慣れることでした。

私はUberEatsの食事を注文する「ハッピーパス」を選びました。これは、日曜日の夜にユーザーとして、マグロとパイナップル(私を訴える)ピザを配達するために時々完了するものです。

初めて使ったときの不安や、実際に届く食べ物への不信感は今でも覚えていますが、とても楽しんで使っていると言えます。使いやすくて快適な、比較的簡単で実用的なアプリだと思います。注文状況を伝える最後のアニメイラストが特に好きです。そしてもちろん、耐え難い不確実性を取り除くGPS追跡機能があります。ピザが街の通りに乗るのを見るのが好きではない人はいますか?しかし、それは別の話です。つまり、ここに、優れたユーザーエクスペリエンスのすべての要素が存在する機能と魅力があります。

チャレンジの最初のステップは、正直に言うと、ローファイでユーザーフローを描くことでした。これは非常に楽しかったです。インターフェースを研究し、フローの全体的な構造だけでなく、ページとそのUI要素の構造にも注意を払い、潜在的な不整合(こんにちは、配信/ピックアップのトグルボタン)に気付くことさえ余儀なくされました。スケッチには点線のグリッドを使用しました。これを自分で設定し、ほこりで覆われた家庭用プリンターを便利にしました。

UberEatsの注文フローをLo-Fiスケッチで

Lo-Fiペーパープロトタイプを作成すると、フローに不可欠なUI要素と、プレースホルダーボックスと線で表すことができるUI要素(一部のテキスト、ロゴ、画像など)を評価できます。

その後、フローのタスク分析を行いました。ユーザビリティの知識の本は、タスク分析を「(…)タスクの構造、フロー、および属性を識別および理解するためのさまざまな手法」と説明しています。タスク分析は、ユーザーがタスクを完了したり、特定の目標を達成したりするために必要なアクションと認知プロセスを特定します。」これは非常に興味深い演習でした。基本的すぎて役に立たないように見えますが、まったく逆の演習の1つです。初心者の目を通して問題を見ているように感じました。これは、仮定を疑問視する上で非常に貴重な助けになります。

食事のオンラインタスク分析図の注文

ワイヤーフレーミングキットをFigmaに追加するという小さなハードル(男の子、これらのキットを使用すると、はるかに簡単になります。ありがとう、Figmaコミュニティ!)とライブラリの使用方法を理解した後、次のステップはワイヤーフレームを組み立てることでした。元のコンプ、階層、およびそれらの要素の重要性を研究し、アイデアをうまく​​伝えるために含める情報/詳細の量を決定することは、さらに別の機会でした。レイアウトグリッドの作成、自動レイアウト、オブジェクト制約の定義、およびライブラリとコンポーネントの操作を練習する必要がありました。私はフィグマと友達になると確信しています。

最後のステップは、このプロトタイプをまとめることでした。プロセスでは少しストレスがかかりましたが、最終的には満足のいく作業でした。

Uber Eats Ordering User Flow Prototype in Figma

アイデアをテストして伝達するためのツールとして、ゼロからより多くのワイヤーフレームを構築することを楽しみにしています。やったー!

© Copyright 2021 - 2022 | hachiwiki.com | All Rights Reserved