Tagged

UI

A collection of 74 posts

UI

2015年以降のUIデザイン展望

消えるハードとソフトの境界線 Apple Watch のドキュメンテーション [https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/WatchHumanInterfaceGuidelines/] には、以下のような言葉がデザインコンセプトとして記載されています。 > Even the physical border of the Retina display has been considered, resulting in edge-to-edge UI design that effectively renders that border invisible. Thoughtful app design should contribute to this experience of hardware

UI

正しくKeynoteでプロトタイプを作るコツ

09より最新版を ChatWorkの社内勉強会 [http://c-note.chatwork.com/post/93858598435/keynote]で、Keynote [https://www.apple.com/jp/mac/keynote/] をプロトタイプ制作に使う方法を共有したことがあります。コード不要な点と、共有が比較的しやすいのでオススメしています。しかし、他のプロトタイプツールと同様、得意・不得意をしっかり理解していないと時間がかかるだけで無意味な作業になることがあります。 古くから Keynote を使っている方は Keynote 09 を好む方がいます。最新版に比べて UI が分かりやすく分類されていたり、AppleScript のサポートが充実していることから、今でも使っている方がいると思います(私も講演時は 09 を使うことがあります)。ただ、プロトタイプを作る際は必ず最新版を使うようにしています。最新版のほうが優れているのは以下の4点です。 0.01秒単位で微調整が可能 Keynote 09 では、スライドショーを再生しなければアニメーションを見

google

Material Designから学ぶデザインと技術の共通項

Google I/O 2014 [https://www.google.com/events/io] では様々なデバイスが発表されて、ますます Google が日々の生活へ入り込んでいくのだなという印象を受けました。幾つかのプロダクトは興味深かったですが、プロダクトより気になったのが Material Design [http://www.google.com/design/] の発表です。現在 Android L [http://developer.android.com/preview/index.html] と称されている次期バージョン Android で採用されているデザイン言語のガイドラインです。 Skeuomorphism [http://www.yasuhisa.com/could/article/design-issues-2012/] が全面的に使われていたときは、画面上にあるオブジェクトを触っているような感覚を見た目で演出していましたが、Material Design ではアニメーションを通して触れているような感覚を作り出しています。

UI

デバイスと利用シーンへの最適化から学べること

Web サイトデザインでは 2, 3 年くらい前から モバイルファーストでデザインをする [http://www.yasuhisa.com/could/article/responsive-design/] という考え方が浸透し始めていますが、最近アプリでも似たような傾向が見られるようになってきました。先週 Foursquqre が チェックインとショップガイドを分ける [http://techcrunch.com/2014/05/02/foursquare-swarms-over-swarmly/] と発表しました。一方、Facebook は、メッセージアプリを分断 [http://techcrunch.com/2014/04/09/facebook-messenger-or-the-highway/] しようとしています(Google+ は、Hangout を分断してしばらく経ちます)。 デスクトップ版の使い勝手に慣れ親しんでいる方にとっては『改悪』なのかもしれません。しかし、モバイル(又はスマートデバイス)中心で活用している方には、

UI

Webらしいニュース配信UIとは

紙的な情報配信 新聞記事は、印刷されたらそれで終わりです。後の紙面で修正・注釈が入る場合がありますが、記事が世に出た瞬間、そのままのかたちで残ります。また、配信できるタイミングと回数が限られているので(朝・夕、時々号外)、期限までにどれだけ記事の質を高めるかが勝負になることもあると思います。新聞社の Web サイトは、こうした『新聞の性質』を強く残したまま Web コンテンツを配信しているように見えます。 カテゴリやキーワード(タグ)を活用した情報分類をするなど、 Web の特性を活かした手法を取り入れているものの、記事を集めた書庫のような存在です。以前紹介した 公共施設の Web サイト [http://www.yasuhisa.com/could/article/content-webaccessibility/] と似たような状況といえるでしょう。新聞社の Web サイトの記事の特長をみると、記事の形状は、紙の時代とほぼ変わりないことが分かります。 * 配信された記事は、そのままの形で残る * 訂正や追加情報が入る場合はあるが、別記事として配信されることがある * キー

UI

カードUIとコンテンツのパッケージング

小さなパッケージとしてのカード 前回の記事 [http://www.yasuhisa.com/could/article/message-card-ui/] で、メッセージのやりとりという文脈にカード UI が組合わさることで、新たな利用者体験を提供できるのではないかという話をしました。コンテンツを『ページ』としてではなく、『小さなパッケージ [http://www.yasuhisa.com/could/article/content-package-design/] 』にして利用者に配信することが主流になりつつある現在。これは、Web 上の情報のあり方を再考せざるを得ないと同時に、利用者にとって理解しやすい(ページに代わる)メタファが必要とされているのだと思います。小さなパッケージの表現方法としてカード UI は、無視できないデザインパターンのひとつです。 カード UI の可能性を最初に感じたのは、2010 年に登場したPinterest [http://pinterest.com/] 。たくさんの画像を全面に出しつつ、概要や操作を統一感を持たせてコンパクトに表現しています。P

UI

カードUIと会話化するデザイン

LINE [http://line.me/ja/], WhatsApp [http://www.whatsapp.com/], Facebook Message [https://www.facebook.com/about/messages/] のようなメッセージアプリの魅力のひとつに「情報の流れが制御できる」ところがあると思います。1対1の会話が中心なので、ノイズが少ないですし、情報を追いかけるのも容易です。 Jelly [http://jelly.co/] のように、メッセージアプリのような表現がメッセージアプリ以外で見られるようになってきているのも、今の利用者に求めらている情報の形だからなのかもしれません。 今、UI デザイン [http://www.yasuhisa.com/could/article/no-border-design/] という観点で注目しているのは、この『メッセージ型 UI [http://www.yasuhisa.com/

UI

利用者モードとUIの関係

タッチデバイスを視野にいれた UI パターンの事例がかなり出そろってきました。使いやすいと定評があるもの、流行なもの、採用例が多いものなど様々ですが、実際のところどの UI パターンを採用すれば良いか迷う場合がでてきます。「○○の場合は、このパターン」と一発で決めることが出来なくても、考慮したいパターンを絞ることができます。絞り込みの際に利用者のモードが役に立ちます。 モードとは、人がアプリケーションやサービスと向き合うときの状態のことを指します。利用者の意図、環境、時間、向き合っているデバイスに応じて、モードがダイナミックに変化することがあります。モードを理解することで、利用者のニーズに近いインターフェイスを提供することができます。同じ系統のアプリケーションでも UI が全く異なる場合がありますが、それは利用者のモードの捉え方の違いからだと考えられます。 モバイルアプリケーションの多くは以下の 5 つのモードに振り分けることができます。 1. Explore(探索): 全貌を見渡したり、新しいものを見つけ出す 2. Consume(消費): コンテンツ観覧にフォーカスする

apple

iOS 7 UI 考察(前編)

発表当時から賛否両論の意見が飛び交っていた iOS 7 [http://www.apple.com/jp/ios/] 。普通に使えるようになってしばらく経つので、改めて Apple (特に ソフトウェアエンジニアリング担当の Craig Federighi と デザイン担当の Jony Ive)が何を目指しているのかを私の中で考えてみました。今回は特に色にフォーカスしてデザインコンセプトの分析です。こういう見方もあるんだという、ひとつの視点として見ていただけると嬉しいです。 人間性を持たせること 人間性(Humanize)は、Apple の歴史からみて重要なキーワードだと思います。1984 年に発表された Machintosh 128K は当時のコンピュータの概念を覆す色・形でした(コンピュータの宣伝をスーパーボールで放送するというのも革命的でした)。一部のテクノロジーに強い人たちだけが使う、どこか冷たくて突き放しているイメージがあったコンピュータを一気に一般消費者のほうへ近づけた製品です。 Machintosh 128K は、ハードウェアだけではなくソフトウェアも大きな注目を

UI

利用者の期待とUIデザインについて

UI デザインとひとことで言ってもたくさんのことを考慮しなければいけません。単一機能のシンプルなアプリの設計だったとしても、UI の課題は山のようにあります。私自身、どこから始めたら良いのか分からなくなることがありますが、UI デザインを考える始めるために、ふたつの疑問を自分自身に問いかけるようにしています。 * 利用者が期待に応えられるようなインターフェイスはなにか? * 利用者が目的に辿り着く為の明確な道筋はなにか? 利用者と目的の間には『溝』があります。それをどう埋めるのかを考えるのも UI デザイン。 矢印のような印がついたボタンがあれば、利用者は何を期待し、行動するのか。 この2つの疑問のなかで特に重要になのが「期待に応える」という部分です。実は、利用者の期待をうまく処理できていないために、使い難いという反応に繋がる場合があります。では、ここでいう 期待とは、どういう意味なのでしょうか。 * 次に表示される画面が、利用者の思っていたものであること * 操作した結果が、利用者が想定していたものであること それでは、逆に期待通りではない状態とはどういったもので

UI

人との関わりから考えるタッチUIのあり方

タッチ UI のデザインで難しいのは、表層的な部分だけを設計すれば良いものになるわけではないという点です。技術もきちんと理解することで、Web なら Web らしい、アプリならアプリらしいデザインになります。表層的な部分から入ると、見た目は良いけど使い難くなったり、「なんとなく違う」という声に繋がることもあります。 だからといって、絵を描きながら UI を模索することを否定しているわけではありません。しかしながら絵を描く過程があったとしても、人がデバイスとどのように関わるのかを理解していることが前提になります。人はどのように UI に触れて、どのようなフィードバック(アウトプット)を期待しているのでしょうか。 タッチデバイスにある新しい挑戦 多くの方がタッチデバイスを扱うようになって数年経ちますが、今はもう画面に触れるだけが唯一の方法ではありません。人とデバイスの関係はより親密になったと同時に、関わり方は多様で複雑になりました。 おさらいという意味も含めて、最近のデバイスと人との関わり(インプット & アウトプット)をまとめてみました。 多種多様なインプットとアウトプットが

UI

UIだけでもデザインできる理由

UI(ユーザーインターフェイス)は、いつの頃からか魅力的な視覚要素が含まれた GUI として語られるほうが多くなりました。これはある種、デザインを装飾としてのみ捕われてしまう状況と似ているところがあります。 では、ユーザーインターフェイスとは一体何なのか。スケッチしてみました。 昔からあるデスクトップでも、Google Glass のような未知のデバイスでも、人とコンピュータの関わりは必ずといっていいほど発生します。 人が何かをインプットすることで、コンピュータは処理したデータをアウトプットして人に伝えます。ユーザーインタフェイスとは、人のインプットを助長したり、コンピュータが処理したデータを人が理解できるようにアウトプットする役割を果たします。つまり、人が操作するコンピュータとの関わりを円滑なものにするのがユーザーインターフェイスの基礎と捉えることができます。UI を HCI (Human-Computer Interface) と言い換えることがありますが、UI とは表層的な絵を指すだけではなく、関係性を設計するものというのが分かってきます。 先月のセミナー [http

UI

保存アイコンでみえてくるアイコンデザインの勘違い

先日 Goodpatch さんが 保存アイコン=フロッピーディスクの時代は終わった…? [http://memo.goodpatch.co/2013/04/about-save-icon/] という興味深い記事が掲載されていました。フロッピーディスクを保存アイコンをとして採用するのは古いのではないか、という議論は国内外で何年かに一回はあります。私も 2009 年に変わりゆく「保存」の存在 [http://www.yasuhisa.com/could/article/meaning-of-save/] と題してフロッピーディスクアイコンのあり方も踏まえて、今後の保存の姿を模索していました。また、先月開催された Android Bazaar Conference 2013 Spring [http://www.yasuhisa.com/could/article/text-is-ui/] でも同じ話題に触れています。 アイコンと問題解決について 様々なデザイナーが新しい保存アイコンを提案しているものの、「うん、これは保存だ」と納得できたものはほとんどなかったと思います。ダウンロード

UI

言葉はグラフィックより大事なインターフェイス

2013年3月16日にAndroid Bazaar Conference 2013 Spring [http://www.android-group.jp/conference/abc2013s/] が開催されました。昨年に引き続き [http://www.yasuhisa.com/could/article/human-centered-game-design/] 今年も登壇。前回はゲームをテーマにして話をしましたが、今回は「コンテンツで改善する UI デザインの極意」と題してコンテンツと UI をテーマに話をしました。 見た目が綺麗だから良い UI というわけではない 見た目とインタラクションの提案は素晴らしいですが、メニューのキャプションは「My」だけ。これは何ができるアプリなのでしょうか。UI のインスピレーションとして Dribblbe [http://dribbble.com/search?q=UI] や Android Patterns [http:

UI

UXとUIが混同されるワケ

最近 UX [http://www.yasuhisa.com/could/tag/ux/] と UI [http://www.yasuhisa.com/could/tag/ui/] を混同して表記されているのを見かけるようになりました。私もウケやすいということで、混同させた [http://www.yasuhisa.com/could/article/ui-ux-2011-trends/]ことがあります。しかし実際のところ UX と UI は同義語ではありません。良い UI デザインをすれば、UX が向上する可能性はありますが、必ずしもそうではありません。逆もしかりです。最近も UX と UIの違いを分かりやすく表現しようと、シリアルとボールの写真を使った例 [http://design.org/blog/

UI

ミニマリズムUIの課題と対策

実世界のオブジェクトのような質感を UI に加えることで、使いやすさを向上させるアプローチは 親しみやすさを生み出す [http://www.yasuhisa.com/could/article/habit-ui-ixd/] ことから、インターフェイスデザインによく採用されるようになりました。これとは別にアプリの UI デザインでよく見かけるのが、モダニズムを彷彿させたミニマムなデザイン。装飾を最小限に抑え、グリッドで整理された見せ方になります。 代表的なのが Flipboard [http://flipboard.com/] や Pulse [http://www.pulse.me/] のようなニュースリーダーアプリ。Textdeux [http://teuxdeux.com/iphone] や Sparrow [http://sparrowapp.com/] といった仕事に使えるアプリでもミニマムなアプローチをよく見かけます。Instapaper [http://www.instapaper.com/] や Read

UI

習慣になるまでの UI と操作の変化

タッチしてもらうための第一歩 タッチデバイスへの違和感や不安をもっている方はまだ少なくないと思います。 毎日の生活に登場するタッチデバイスの代表といえば、ATMや電車の切符販売機がありますが、処理速度が遅くスクリーンのオブジェクトを触れている感覚はあまりありません。そのせいか、スクリーンを強く押している方をたまに見かけます。また、タッチインターフェイスだけでなく、触れて押すことができる物理的なボタンが用意されている場合もあります。タッチへの不安を解消するための配慮なのかもしれません。 毎日の生活から比較すると、タッチデバイスでスイスイいろいろな操作が出来るというのは、未知の世界に見えてもおかしくありません。操作の仕方が分かる iPad や Galaxy の CM が TV で流れているとはいえ、「本当にタッチでこんなに動くのか」という不安をもっている方もいるはずです。 UI デザインのひとつのアプローチとして、親しみやすさをつくる という方法があります。特に新しいアイデアや価値を提供しなければならないときに有効で、広く知られているもの、ターゲットにしている人にとって既に知っているこ

UI

ニュースの理解が深まるタイムツリーコンセプト

リアルタイム時代に必要なニュースUI 新聞サイト・ニュースサイトは、基本的に「記事」という情報の単位をもつことを前提にしています。そして、記事という単位を時系列やテーマ(カテゴリ)別で表示できるように CMS でコントールしています。こうした見せ方は情報サイト全般で扱われていますが、今のニュースのスピードや Web 利用の変化と照らし合わせると、記事という情報単位があまりにも大きく柔軟性が乏しく感じることがあります。現在のニュースサイトのコンテンツに起こっている現象が幾つかあります。 * 速報ですら記事にしないといけないので、200文字程度のページが存在する * 記事というタイトルとテキストを必要とする『入れ物』があるため、テキストだけ、ビデオだけ、写真だけといったコンテンツタイプの格納がしにくい * ソーシャルメディアでブレイクしたニュースに追いつけない * ニュースサイトのリアルタイムと、人が体感するリアルタイムは異なる。ニュースサイトが提示する「最新情報」が人が感じる最新とは限らない * ひとつの出来事が地続きで繋がっているものの、利用者はトピック/タグで絞り込んで検

UI

伝わるアニメーションのための第一歩

2011年 UI/UX トレンド [http://www.yasuhisa.com/could/article/ui-ux-2011-trends/] で、アニメーションが実装される機会が増えるだろうと予測しました。今はアプリだけなく、Webサイトでもよく見かけるようになりました。実装が簡単に行えることから、何気なく使われていることが多くなったわけですが、正しく実装するのが意外と難しかったりします。 アニメーション効果はコミュニケーション を円滑にするために使われるべきです。アニメーションが発生した瞬間に何かしらのコミュニケーションがインターフェイスと利用者の間に生まれます。つまりアニメーション効果を実装するということは、コミュニケーションの目的を明確にすることから始まります。コミュニケーションを確立しているかどうかで、アニメーション効果がギミックになるのか、意味のあるものになるのか決まります。 アニメーションと一言でいっても様々な形があります。例えば jQuery [http://jquery.com] には以下のようなアニメーションが実装可能です。 .animate()C

UI

Kinectから始まる新しいインタラクション

既に 1000 万台が販売されていると言われている Microsoft Kinect [https://www.amazon.co.jp/dp/B003T9VDJQ/ref=as_li_ss_til?tag=could-22&camp=1027&creative=7407&linkCode=as4&creativeASIN=B003T9VDJQ&adid=18CVSS3GS5PZPPHH7QMH&] 。コントローラーを持たなくても身体を動かすだけで様々な操作を実現するこのデバイス。USB接続を使用していることもあり、発売開始直後から、PC や Mac に接続をしてハッキングをする方が続出。プログラミングのためのプラグイン・アドオン・ライブラリが続々と登場しました。久々にモノ作り魂に火が付いた方も少なくないと思います。 Kinect と AR を組み合わせたデモこうした開発者達の草の根活動を禁止することは出来たはずですが、

UI

マルチデバイスUI設計で注目したい5つの要素

2011年 UI/UX トレンド [http://www.yasuhisa.com/could/article/ui-ux-2011-trends/] という記事で、モバイルWebデザインのノウハウがデスクトップにも影響し始めているという指摘をしました。Mac OSX Lion [http://www.apple.com/jp/macosx/] や Windows 8 のような OS だけでなく、Web サイトにも変化が見られています。スクリーンの大きさを活用してモバイル環境では再現が難しいダイナミックで動きが多いレイアウトも出て来ている一方、モバイルアプリの血を受け継いだかのような目的にフォーカスしやすく、目的までのステップと選択肢が少ない Web サイト / アプリケーションも次々と出て来ています。 Windows Phone 7 をそのまま受け継いだかのような Windows 8 の UI今後デスクトップOS がモバイルOSのようになり、利用者がシンプルな操作と体験を求めやすい環境になれば、Web サイトも次第にシンプルになる可能性がありますし、そうしなければならない状況も出て

UI

2011年 UI / UX トレンド

2011年の1月。まだ年が始まったばかりでしたが、今年の Web デザイントレンド [http://webdesignledger.com/tips/web-design-trends-in-2011] という記事が発表されたりしていました。その後、数々のトレンド記事が国内外で数多く紹介されていますが、ルック&フィールに関する話題、又は技術的な側面から見た話題が多くを占めています。こうしたトレンドを知ることは重要ですが、トレンドの全体像として捉えるには多少偏っていると思います。そこで今記事では、UI / UX デザインの側面からみた 2011 年のトレンドを幾つか紹介していきます。 To Do アプリ Flow [http://www.getflow.com/] は、まるでデスクトップ向けの Mac アプリを使っているかのような UI デザインを Web 上で再現しています。この記事で挙げる幾つかのトレンドが現れるキッカケを作ったのは、テクノロジーと Web が今まで以上に強い連携が可能になったからです。デスクトップ(又はオフライン)アプリケーションと同等の能力を Web で実現出来

UI

GIMPが提案するソーシャルUI

着実に機能を増やし続けているオープンソースの Photoshop [https://www.amazon.co.jp/dp/B003F783CW/ref=as_li_ss_til?tag=could-22&camp=1027&creative=7407&linkCode=as4&creativeASIN=B003F783CW&adid=06T97V7BAYT1H3AXJMQD&] 代替プログラム GIMP [http://www.gimp.org/]。他アプリケーションとの連携を考えると Adobe 製品で揃えた方が有利ですが、機能だけみると Photoshop のライバルと見なしても良いくらい充実しています。GIMPは Photoshop と同様、プラグインやアクションが共有されている [http://registry.

UI

ジェスチャーUIの課題と対策

タブレットやスマートフォンで積極的に導入されているマルチタッチテクノロジー。デジタルなオブジェクトに触れているような感覚が味わえるタッチインターフェイスは、抽象的なマウス操作に比べて直感的だと言われています。スクリーンに触れるだけの動作は直感的で簡単そうですが、これにジェスチャーが加わることで突然ややこしくなる場合があります。感覚的・直感的というよりかは、操作を覚えなくてはならない負荷がかかる可能性もあります。 未来のインターフェイスを語る上でよく出て来るのが映画『マイノリティ・リポート [https://www.amazon.co.jp/dp/B00006CTJN/ref=as_li_ss_til?tag=could-22&camp=1027&creative=7407&linkCode=as4&creativeASIN=B00006CTJN&adid=14NPG0DWDPFKW1YA2AQA&] 』。この映画に登場するマルチタッチ UI の技術は一般化されつつあるといっても過言ではありませんが、大きく腕を振りかざし、長時間立ち続けなければならないのであれば、すぐに疲れてしまいそう

IA

パン屑リストについてもう一度考えてみる

様々なパン屑リスト 利用者が辿ってきた道筋を示し、いつでも先に戻れるような配慮としてパン屑リスト [http://ja.wikipedia.org/wiki/%E3%83%91%E3%83%B3%E3%81%8F%E3%81%9A%E3%83%AA%E3%82%B9%E3%83%88] があります。IA の専門家 Keith Instone [http://instone.org/] によると、パン屑リストには以下のタイプがあると言われています。 場所の示すWebサイトをツリー状として捉えたときの利用者の現在地を表示する経路を示す利用者が現在地まで辿り着いた道筋を表示する属性を示す 断面的な検索をして絞り込む際、選択済みの属性を表示する進行状況を示すアプリケーションの利用の際、タスクの進行状況を表示する それぞれのパン屑リストには特有の機能があり役割を果たして来たわけですが、本当に必要かどうかを再考するべきタイプもあります。例えば経路を示すパン屑の場合、ブラウザで既に実装している「戻る / 履歴」と重複しています。