UIデザインの決定プロセスをより高速化するために、会議するのをやめました。会議をやめたことでより多くのフィードバックを得ることができ、デザインの修正コストを下げる事ができました。Read less
![UIの話は会議室でするな](https://cdn-ak-scissors.b.st-hatena.com/image/square/9e38163ddf106c9e4c94aff05519df4b12021232/height=288;version=1;width=512/https%3A%2F%2Fcdn.slidesharecdn.com%2Fss_thumbnails%2Fuipublic-141010024817-conversion-gate01-thumbnail.jpg%3Fwidth%3D640%26height%3D640%26fit%3Dbounds)
UIデザインの決定プロセスをより高速化するために、会議するのをやめました。会議をやめたことでより多くのフィードバックを得ることができ、デザインの修正コストを下げる事ができました。Read less
あなたが作っているナビゲーションボタンは今流行りの「ハンバーガーボタン」、またの名を「ナビゲーションドロワー」を採用しているだろうか。それとも一覧で表示している「タブボタン」を採用しているだろうか。 クリーンでシンプル、メインコンテンツの表示領域が最も広く確保できるなどいいこと尽くしの「ハンバーガーボタン」ナビゲーション。一方で、常にボタンが表示されメインコンテンツの表示領域が必然的に狭くなってしまう「タブボタン」ナビゲーション。見た目のデザインとしては当然「ハンバーガーボタン」の方が良い。では実際にユーザーとしても同様の見解なのだろうか。 クリーンでシンプルだが、ユーザーは操作方法を覚えられない 「ハンバーガーボタン」もしくは「ナビゲーションドロワー」と呼ばれるナビゲーションUIは数多くのアプリに見られる。Googleもアプリデベロッパー向けにオススメのデザインパターンとして推奨している
「Empty Data(またはEmpty Status)」というUIパターンがあります。タイムラインやドロワーなどデザイナーであれば知っているUIパターンの名称に比べると、あまり日本では聞き慣れないのかもしれません。Empty Dataは簡単に言うとデータがない時のUIになります(Webでの404に近いですが、少し違います)。では、Empty Dataを知るためにもう少し詳しく紹介していきたいと思います。 参考:モバイルデザインパターン 第2版 ―ユーザーインタフェースのためのパターン集 Empty DataはUIである Empty Dataはただユーザにデータがないことを示すだけではありません。ユーザにデータが存在しないという情報をフィードバックし、どうしたらここに情報が入るかのアクションに繋げる立派なUIです。もしEmpty DataのUIが存在しなかったらユーザはどのように感じるでし
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
こんにちは。MUUUUU.ORGの中の人こと、 Quoitworks(クオートワークス)のムラマツ(マツムラではありません)です。 ブラウザの進化により昨今のwebサイトでは色々なアニメーションが実装できるようになってきました。そこで今回は動きに対する感性を磨き、「もっと気持ち良い感じに」というクライアントの要望をスマートにかなえる事ができるように、 セクシーだと思ったUIアニメーションを、エイヤエイヤとまとめてみました。(すみません!サイト負荷が高くサーバーがダウンしてしまうので、一部リンクのみになってます) line25.com https://dribbble.com/shots/1448379-Lookbook-nu-app https://medium.com/ui-ux-articles/3d1b0a9b810e http://thedesigninspiration.com/
「デザインが分からない」 時折、エンジニアからこうしたセリフを聞くことがある。 たいてい、このセリフが意味するのは「自分には絵心やセンスがないから」という単純な理由なのだが、本当に絵心やセンスがないとデザインは理解できないものなのだろうか? この連載では、デザインの本質的なロジックやデザイナーの思考法を、毎回著名サービスにかかわるデザイナーに語ってもらう。 連載2回目となる今回は、クラウド会計アプリ『freee』のUXディレクター、関口聡介氏だ。 freee株式会社 UXディレクター 関口聡介氏 1974年生まれ。25歳で映像制作とWeb UXのコンサルティング会社を設立。サン・マイクロシステムズと契約しWebマーケティングを担当。その後Googleに正式入社し、検索トップページ(日本版)のリニューアルやdocomo向けGoogle iウィジェット、初期のGoogle日本語入力のUX担当。
By continuing to browse this website, you consent to our use of cookies. The use of cookies facilitates your connection, improves display performance, and facilitates interaction with Louis Roederer. Learn more about managing cookie settings 本サイトの閲覧にあたっては、お住まいの国の法律で定められた飲酒年齢に達している必要があります。お住まいの国に飲酒年齢を規定する法律がない場合は、18歳以上の方に限らせていただきます。 本サイトの利用規約に同意します。 本サイトの利用規約を遵守した上でご利用くさだい。 はい いいえ
UIのディテールをほんの少し工夫するだけでUXは劇的に改善します。本書では効果的なマイクロインタラクション――ひとつの作業だけをこなす最小単位のインタラクション――の意味、有効性、デザイン手法を学びます。マイクロインタラクションを「トリガー」「ルール」「フィードバック」「ループとモード」に分解して豊富な実例とともにていねいに解説し、さらにプロトタイプやドキュメント作成、テストといった実践的な手法も紹介します。マイクロインタラクションを活用すれば、ありふれた製品も顧客を引きつける魅力的な製品に生まれ変わらせることができます。ドナルド・ノーマン推薦書! 翻訳者によるサポートページ。 本書に寄せて ――ドナルド・ノーマン 賞賛の声 まえがき 謝辞 意見と質問 1章 マイクロインタラクションのデザイン 1.1 機能ではないが侮れない存在 1.1.1 大規模なマイクロインタラクション 1.2 マイク
ハイライトピックアップ Web2.0を引き起こしているのと同じ時代の潮流が、エンジニアの地位の低下を引き起し、エンジニアがUIデザインをしたがる動機を創り出している。 Googleは、「エンジニアの会社」という皮をかぶった「企画・マーケティング・デザイン」の会社である。 エンジニアよりデザイン能力の低いダメデザイナーがうじゃうじゃでてくる構造。 優秀な人ならデザインスキルがなくてもいいデザインができるのは幻想。現実には、デザインスキルの差は容易には超えられない壁。 デザイナーに必要な技術的知識とエンジニアの技術的知識は別物なので、エンジニアの技術力はデザインをする上でそれほど強みにならない。したがって、技術力とデザイン力を兼ね備えた優秀なデザイナーはエンジニアとデザイナーのハイブリッドではない。 一人の人間がUIのデザインと実装を両方やると二兎を追うものになってUIの質が低下する。二兎を追
ソフトウェアエンジニアは新しく何かを開発する際に、技術的に可能かどうか、どう実装すればいいか、みたいなのを先んじて考えがちな気がする。 そういうボトムアップ的な思考は技術を知っているが故に出る自然な思考なのだが、私の経験上そういう思考で作られたものは大体使いづらい、いわゆる gomi が出来上がる。 なぜか?それは UI を考える際に実現可能性や実装のしやすさを優先してしまうから。 ここでいう UI とは WEB サービスやネイティブアプリなどに限らず、ライブラリなどであれば API を指す。 私は数年前から UI → 実装という開発順序で開発をしていて、それは以下のような感じ。 まず実現可能性を窓から投げ捨てる 素晴らしいと思う UI を考える その素晴らしい UI を実現するための実装方法を考える こういう感じで進めると、ほとんどの場合、素晴らしい UI を実現するための方法がすご
A note to our community Experiments with Google was born out of a simple idea, but you all turned it into something beyond anything we could have ever imagined. You filled it with thousands of experiments that inspired people everywhere - from the classroom to the surface of Mars. When it comes to the internet, 14 years is a long time. So in the spirit of experimentation we’re trying something new
最新のイベント・キャンペーン情報 技術情報 [新機能や技術情報など わかりやすく解説](mt450454(v=msdn.10).md) Windows 10 についてエバンジェリストの視点で解説している“Evangelist Eye”というブログ シリーズです [動画で学ぶ Windows 10](mt662286(v=msdn.10).md) Windows 10 に関する技術を、開発者及びシステム企画・運営の方向けに、動画でわかりやすく発信しています [新機能を“いち早く” 試してみよう](https://insider.windows.com/) 市場に出る前のプレビュー ビルドで、新機能を一足早く試せます。さらに、マイクロソフトへのフィードバックを通し新機能が搭載されることも [さっそく開発を 始めてみよう](https://dev.windows.com/ja-jp/downlo
iOS 7のブラー効果をどう実現する? コントロールセンターや音量調節の背景など、iOS 7でよく見かける磨りガラス風のあれです。ブラーをかけるとなんとなくiOS 7っぽくなるので、「コントロールセンターみたいにブラーかけてよ!」って言われることが増えそうですね。 「磨りガラス風の画像を上にかぶせりゃいいんじゃないの?」と誤解されている方も多いかもしれませんが、そういうわけにはいきません!それっぽく見せるにはプログラムでそこそこのコードを書いてあげなければなりません。 UIViewとかにブラーをかけるメソッドがあるといいのですが、今のところないです。したがって、自前で作成したビューにブラーをかけるには、その処理を自分で実装する必要があります。ようするに時間がかかります。 そこで、ブラーをかけるのにどういった実装方法があるのかを調べてみたところ、以下の2つの方法がみつかりました。 標準コント
巷で良く聞かれる「UXデザインとは?」意味が広義にわたるため明快に答えることが出来る人はなかなか少ないのではないでしょうか?ただ「ハラハラという会社で提供するUXデザインとは何?」と聞かれたらこう答えると思います。 “ルック&フィールによって発生する体験の価値をよりよくする為の作業” UXデザインを正しく運用・開発するためにはIA(情報アーキテクチャ)とそれを実行する手法(ステートメントシート、ペルソナ、カスタマーエクスペリエンスマップ、ワイヤーフレームなど)を組み合わせる必要があります。 今回はそういったツールの中で制作過程におけるレイトステージにおいて弊社で最もハードに使われる「ワイヤーフレーム」と「プロトタイプ」を組み合わせる開発方法を少しだけご紹介いたします(あくまでもアプリの操作法では無くワークフローの一部を抜粋したものになります) 基本的な流れはワイヤーフレーム→プロトタイプの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く