UX を構成する 5 つの段階を振り返る:UX Days Tokyo 2016
本質を突く5段階構成 2002 年に刊行された Jesse James Garrett 氏の著書「Elements of User Experience」には、デザイナーとしてユーザーエクスペリエンス（UX）を考える上で重要な概念図が紹介されています（日本では『ウェブ戦略としての「ユーザーエクスペリエンス」』という書名で 2005 年に発売されています）。 物を買う、記事を読む、チケットを予約する、地図見るといった様々な行動には、利用者の期待や、何気無い操作など様々な要素が含まれています。利用者の体験に影響を及ぼす要素を以下のように 5 つの段階に分類しています。 表層（Surface）: 情報を示したり、操作できるものを表す視覚的なデザイン 骨格（Skelton）: 利用者が理解しやすいように画面に表示される情報の優先順位や配置の設計 構造（Structure）: 様々な操作を経て目的の
フラットデザインのウェブサイトはユーザーの時間を無駄にしブランドを傷つける可能性がある
by Heima ウェブサイトやアプリに用いられる「フラットデザイン」は、モダンですっきりした印象を人に与えます。しかし、コンサルティング会社であるニールセン・ノーマン・グループの調査によって、フラットデザインには、ユーザーに余計な時間を割かせ、決断力を弱める効果があると判明。ボタンなどのナビゲーションがフラットデザインになることで、ユーザーのページ滞在時間は増えるものの、ブランドへの見方がネガティブなものに変わる可能性もあるとのことです。 Flat UI Elements Attract Less Attention and Cause Uncertainty https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/ 調査グループは一般のウェブユーザー71人を集め、それぞれのユーザーに9つのウェブ
モバイルのUXデザインにおけるベストプラクティス
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 アプリはコンテンツやサービスを提供するための、今日（こんにち）の主流かつ確かな方法です。しかし、飽和状態の市場でユーザーを満足させ、その興味をつなぎとめるために、どうすればモバイルアプリは意義や価値のあるものとなるのでしょうか。 この記事では、素晴らしいモバイルUXを作る鍵となる、UXデザインのための７つのヒントをご紹介します。 １. 一つの画面につき、一つの操作 ユーザーが情報を取得する際の努力を軽減する 皆さんがデザインするアプリの画面では、ユーザーにとって最も価値のある一つの動作を助長するものでなければなりません。各画面を一つの目的だけのためにデザインし、Call to Action（行動喚起）は一つに留めましょう。こうすることで、ユーザーはアプリを理解・
UIのライティングでやってはいけない16のこと
UIのラベルやテキストは、正確且つ簡潔なライティングによって使いやすくなり、信頼度が高まります。 では、ラベルやテキストのライティングにおいてやってはいけないこととは何でしょうか？ 今回はUIライティングで避けるべき16個のポイントをご紹介します。 1. 特殊な言い回しと専門用語 ユーザーの知らない用語や馴染みのない言い回しはユーザーの認知的負荷を増やしてしまいます。「ギークな会話」を避ける為にベストを尽くしましょう。安全策を取って、すべての読者に向けて書くということ、そしてビギナー、ベテラン問わず通じるような一般的な言葉を用いましょう。 以下は特殊な言い回しをエラーメッセージに使用した例です。 もちろん、これは状況によります。もしこのメッセージを見て理解できるユーザーが対象なのであれば問題ありません。そうでなければ、今すぐにでも単純で直感的になるように変更しましょう。 2. 長過ぎる詳細
ユーザーが理解しやすいアイコンにするための６つのルール
人間とコンピュータとのやり取りにおいて、アイコンはテキストにはない長所がいくつかあります。 シンプルで分かりやすくフレンドリー。長い文章と置き換えることができる。 画面の中で場所を取らず、特に小さいスクリーンほど使い勝手がよい。 視覚的に楽しみがあり、デザインの芸術性を高めることができる。 一番重要なポイントとして、ほとんどのアプリがアイコンを用いており、ユーザーにとって親近感のあるデザインパターンである。 これらの潜在的な長所がある一方で、アイコンはその潜在的な短所を考慮せずにデザインされると、ユーサビリティ面での問題を引き起こします。 この記事では、UIの点からアイコンに関連した多くの問題を要約して解説し、これらの問題に対する対処法を述べていきたいと思います。 １．アイコンは意味を伝えるもの 理解しにくいアイコンが、伝えるべき機能を分かりにくくしてしまうことがあります。アイコンは意味を
ハンバーガーメニューと非表示のナビゲーションはUX指標を悪化させる
Webサイトのメインナビゲーションを非表示にすると、発見しやすさはほぼ半減する。その上、タスク達成に時間がかかるようになり、タスクがより難しく感じられるようになる。 Hamburger Menus and Hidden Navigation Hurt UX Metrics by Kara Pernice and Raluca Budiu on June 26, 2016 日本語版2016年9月26日公開 非表示のメニュー（ハンバーガーアイコンなど）と、表示されているメニュー（ページトップを横切る形で置かれたリンクなど）について、定量的なユーザビリティテストをおこなったところ、以下のようなことが明らかになった： 非表示のナビゲーションは発見されにくい。表示されているあるいは部分的に表示されているナビゲーションよりも。 ナビゲーションが非表示だと、ナビゲーションはユーザーから利用されにくくなる
その文字、薄すぎない？ デザインにおける灰色の明度は何%が最適か
UX Movementにおいて記者、編集長を務めます。明快で効果的なデザインに美点を見出し、利用者のために払う労力を惜しみません。 一言で灰色と言っても、明るいものもあれば暗いものもあり、実に様々なバリエーションがあります。Webサイトなどでは、いたるところでお目にかかることのできる色でもあります。濃い灰色は主に見出しや本文に、薄い灰色はメタデータ、分類名、説明文に多く使われます。これらの色合いのうち、最も乱用されるのは薄い灰色です。 薄い灰色の文字の問題点 文字色として薄すぎる灰色は可読性に問題を起こしかねません。灰色の文字を薄くしすぎてしまえば、読者が読むにあたって支障をきたすことになります。文字の明度によっては、薄い色の背景に混ざってしまうのです。この現象は、単語や文字をぼやけさせ、判読を困難にします。無理に判読を試みれば、目を傷めてしまうでしょう。 また、薄い灰色の文字は読者の誘導
iPhone に対する不満 - スリープ画面ストーリー - また君か。＠d.hatena
前回（http://d.hatena.ne.jp/matakimika/20090719#p2）の不満に関して、おれが考えた脳内 iPhone 開発バックストーリー。 ある日の Apple 社、iPhone 開発会議。 開発者「ウェイクアップ画面についてですが、カレンダーと新着情報表示機能を仮実装してみま…」 Jobs「すざけんなてやんでえべらぼうめ何年うちの釜のメシ食ってんだああｈｒぅｒｇるｒヴｂヴぉ３ｒ？！（ドガシャーン）」 開発者「！！」 Jobs「…お前携帯電話知ってる？携帯電話をご存知ですかァ？」 開発者「…？」 Jobs「知ってるかつってんの。知ってるかって訊いてんの」 開発者「知ってます」 Jobs「（携帯電話を取り出し）これ便利だよねえ。こう、ポケットから取り出すよね？そんでボタン押すとさ、新着とかすぐわかるの。あー電話あったなーって。メール着てたなーって。わかる？」 開発
本当に有意義なエラーメッセージを書くには | POSTD
想像してください。あなたは今、オフィスにいます。周りとは仕切られた個別スペースです。今週は、近々新たに展開する予定の製品を紹介するために多くの時間を割いてきました。疲れが溜まり、不機嫌ぎみになっています。今はようやく近づいた週末が待ち遠しくて仕方ありません。 しかしその前に、新製品を紹介するホームページがWindows 10で正常に動かくかどうかを試してみなければなりません。あなたは問題ないはずだと信じています。あなたが信頼を寄せているMacには、Windowsを問題なく実行できるソフトもインストールされています。 ソフトを起動してみると、丁寧にもWindowsがポップアップ通知で可能なアップデートがあることを知らせてくれます。もちろんアップデートを開始するため、あなたは了承します。 すると、こんなものを目にするのです。 訳：何かが発生しました。 何かが発生。 新製品の準備のため期限が迫っ
なぜメニュー表示用ボタンの「ハンバーガーアイコン」はダメなのか？
スマートフォンなどのモバイル端末用UIでよく用いられる「三」のマークのアイコンは、ハンバーガーのように見えることからアメリカでは「ハンバーガー」アイコンと呼ばれています。徐々に浸透してきたハンバーガーですが、UIデザインの優劣という観点から見た場合、「劣った醜い撲滅すべきものである」という意見が出されています。なぜハンバーガーがダメなのかについて、ジェームズ・アーチャー氏がデータ分析結果を基に理論的に解説しています。 The Hamburger Menu Doesn't Work - Deep Design http://deep.design/the-hamburger-menu/ 下の画像の赤丸で囲われたのが「ハンバーガー」。モバイル端末UIだけでなくデスクトップUIでも広く普及したアイコンで、クリックすることで主にメニューなど他の追加情報を表示させられます。 ◆不親切 一般的に普及し
Frog Designのデザイン。「UX/UI Conference Tokyo」に行ってきたよ！
先日、Open Network Labは、株式会社NTTドコモ・ベンチャーズと共催の「UX/UI Conference Tokyo」が開催され、世界的に有名なデザインコンサルティングファームであるFrog DesignのGeneral Manager / Steve Boswell氏、Creative Director / Alvaro Marquez 氏の２名がゲストスピーカーとしてお話してくれました。 カンファレンスの中で、取ったメモと自分の記憶を擦り合わせレポと私の考察を書きました。カンファレンスは英語だったこともあり、私なりに解釈した部分があるのと、完全には網羅できていません。もし誤りがあればご指摘頂ければと思います。 以下、 Frog Designは、世界のトップクラスのデザイナーや戦略プランナー、エンジニアを抱えており、製品やサービス対しデザインによるアプローチでコンサルテーシ
Modern UI のようなフラットデザインを目指して使いづらくなっている件について | DevelopersIO
Windows 8 がリリースされてだいぶ日が経ちました。最大の特徴と言ってもよい Modern UI *1。モバイル端末をはじめとしたタッチデバイスに特化した大きめのタイル（ボタン）とタイポグラフィが一際目を引くデザインで、OS X や iOS のそれとは一線を画しています。 一方の Android。2011年2月にバージョン3.0である Honeycomb がリリースされ、それまでの 2.x から刷新したデザインになりました *2。2013年4月現在の最新バージョンである4.2（Jelly Beans）もこの流れを踏んでいます。 両者ともそれまでの Web2.0 と呼ばれていた頃に流行ったグラデーションやドロップシャドウをふんだんに使ったデコラティブなデザインに対し、平面的で装飾要素の極めて少ないミニマルなデザインが特徴です。これらは主に Flat UI と呼ばれ、2012年頃から現在
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【CEDEC 2018】明快で軽快！ Nintendo SwitchのUIを触るだけで楽しい理由 - GAME Watch
【山田祥平のRe:config.sys】 世の中の老眼諸氏よ、もっと怒れ
エンジニアtype 技術者のキャリアを考えるWebマガジン - 転職＠type
【山田祥平のRe:config.sys】 早く来い来いスクロール2.0
PC、スマホの「次」のデヴァイス：MITメディアラボが描くインターフェイス研究の最前線
Engadget | Technology News & Reviews