ユーザーインターフェイス解剖学（公開版）「Goodpatch Engineer Meetup Vol.3 エンジニア目線で考えるデザイン」で発表したスライドの公開版です。 https://goodpatch.connpass.com/event/56973/
キャンセルのキャンセル問題から考えるダイアログデザイン｜Goodpatch Blog グッドパッチブログ
この文脈では、「編集内容のキャンセル」という処理を続行しても良いかをユーザーに確認しています。続行に同意したい多くのユーザーは直感的に同じ表記の「キャンセル」を押したくなるでしょう。しかしそれでは編集のキャンセルが実行されません。 このキャンセルボタンが意味するのは、「『編集内容をキャンセルする』のキャンセル」なのです。つまり、ユーザーが望み通りに編集内容を破棄するためには、反対側のOKボタンを選ぶべきなのです。このような「キャンセルのキャンセル」は二重否定で意味がややこしくなるので避けなければなりません。 ここで「キャンセルのキャンセル」にならなければ良いということで、次のようにボタン名を変えてみました。 これでもう迷うことは無くなりましたか……？ 私はこの修正は誤りだと判断します。「はい」「いいえ」は結果を予想しにくい表現なので、ダイアログのアクションボタンに用いることはあまり適切では
アニメーションをWebサイトに導入するためのテクニック
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 機能的で楽しいアニメーションは、現代のWebデザインにおいて不可欠な要素の１つです。現代のWebサイトでは、細かなインタラクションのデザインが根本的な違いをもたらします。 アニメーションはユーザーに現状を伝えたり、注意をうながしたり、ユーザーの行動の結果を伝えたり、ユーザーのふるまいに影響を与えることもできます。 より良いUXを築くため、サイトにアニメーションを追加する例をいくつか説明していきます。 進捗 ローディングアニメーション Webアニメーションにもっとも共通する用途の１つは、ページの読み込み（ローディング）時にユーザーの気を紛らせることです。 ローディングアニメーションはユーザーの感覚時間に影響し、実際より待ち時間を短く感じさせることができます。 待ち
デザイナーに届けたい…マテリアルデザイン事始め Part.1 - Qiita
2017年DroidKaigi「エンジニアが武器にするMaterial Design」に感化され、わが社でもデザイナー向けマテリアルデザイン勉強会をしてみようと思います。スライド いつの日か「わぁー、イケてるね！（わくわく）」みたいなデザインができる日が来ることを祈って、説明向け資料をまとめていきます。 Part.1 : マテリアルデザインの概観 次回 Part.2 : マテリアルデザインのコンポーネント（小） マテリアルデザインってなんなのさ？ 物質デザイン。デザインパーツを物質として捉え、現実世界のルールに沿うことで、ユーザに直感的な操作を誘導するデザインのこと。 基本の考え方 マテリアルデザインとは紙とインクの要素で出来ている オブジェクトの重なりを物質的に捉える（３次元） 意味のあるアニメーションでより直感的に 紙とインク 紙？ UIパーツは紙でできていると考える。 紙は以下の特徴
はてなブックマークiOSアプリはマテリアルデザインの悪い見本 - UXエンジニアになりたい人のブログ
はてなブックマークのiOSアプリを真面目に使ってみたらひどい出来だったので書きます。 基本構造 まずはアプリの基本構造をおさらいします。このアプリは大きな画面構成として メイン（様々なエントリー一覧） フィード マイページ の3つからなっています。 それぞれの画面と親子関係、各画面を呼び出すための操作をまとめると以下のようになります。[ ]で囲まれた青文字がUI表現で、赤文字部分が最終操作画面とその説明です。★が初期画面です。 まとめたつもりなんですが読みにくいし主題とあまり関係がないので、面倒な人は下の画像まで読み飛ばしてください [フローティング操作ボタン] メイン（様々なエントリー一覧） [ツールバー横のナビゲーションドロワーボタンから左部ナビゲーション：タイトルは「話題を探す」] [仕切り線：カテゴリー] ホーム [タブ] 人気エントリー（いわゆるホッテントリ）★ 新着エントリー（
2016年Webデザイントレンド完全まとめ＆2017年トレンド予測 | テックキャンプ ブログ
あなたは進化を続けるWebデザインのトレンドを追えていますか？ 毎年数多くの新しいテクニックやトレンドが誕生しますが、2016年は2015年の終わりから見るようになった、デザイントレンドが継続しているようです。本記事では、2016年に流行した代表的なデザイン手法やトレンドカラーなど２０選を徹底解説します。 また、2017年のトレンド予測やデザインスキル向上に役立つおすすめサイトもご紹介していきます。 2016年トレンドになったWebデザイン手法11選 垂直パターンとスクロール操作 出典：Advisage デスクトップからの閲覧ユーザー数にも匹敵するほど、モバイル端末の普及がより進むことから、多くのサイトが垂直方向へのスクロール、ユーザーフローを意識したデザインが増えています。 小さなスクリーン画面では、ユーザーはよりスクロールを行うことで、デザイナーは自然と垂直パターンのインターフェース・
株式会社インパス | UXを専門としたUI,UXデザイン・アプリ開発
ページが見つかりませんでした アクセスしようとしたページは削除、変更されたか、現在利用できない可能性があります。 お手数ですが、トップまたはナビゲーションのリンクよりお探しください。
UI談義のすすめ
https://dribbble.com/shots/1679085-Mobile-UI-Blueprint-freebie私の職場ではUIについてのマニアックな談義が行われることがあります。アプリやwebだとかのデザイン会社なので周囲にはUIやUXのプロフェッショナルが集まっていて、『UI談義』の文化が根付いています。 UIを解剖するためのUI談義UI談義とは、UIオタクで集まってUIのことをひたすら考察し合うだけの集まりです。ここには職種問わず誰でも参加が可能で、UIデザイナーはもちろん、iOSデベロッパー、Androidデベロッパー、PM、マネージャーなどなど、あらゆるタイプの人が集まります。 UI談義のテーマは突如設定されます。普段利用しているアプリのちょっとしたインタラクションが気になったらそこでUI談義が始まります。iOSのアップデートでApple純正アプリのUIが変わったタイ
優れたフォームをデザインする
サインアップのフローであれ、マルチビュー・ステッパーであれ、ありきたりのデータ入力であれ、「フォーム」はデジタル・プロダクト・デザインにおいて最も気を遣わなければならないものの1つです。 そこで、今回は一般的にフォーム・デザインで何をやり、何をやらざるべきかについてお話したいと思います。あくまで一般的なガイドラインですので、そのようなものとしてご理解頂いた上で、皆さんの参考になれば幸いです。
Webデザインでよく使うUI要素の名称・用語一覧 - Qiita
Overview Webサイトを作っているとよく出てくるUIの名称を、ざっくばらんにまとめました。 人や会社ごとで固有の呼び方があると思いますが、私の場合こんな感じです。 コミュニケーション円滑にな〜れ ※2016/11/28 はてブコメントなど参照させていただき、少し更新しました。 ポップアップ表示系 ▼ アラート JSのalertかブラウザのデフォルト機能で出るやつ。ダイアログとも。 ▼ モーダル・モーダルウィンドウ 閲覧中のページにカバーを重ねて表示させるやつ。 modalは「このページはいま入力モードだぜ」といった意味合いでmodeを形容詞化したことば。 ▼ ツールチップ・ポップアップ表示 マウスオーバーすると吹き出しとかで表示されるUI。 補足説明などで使用されることが多い。 ▼ ポップアップウィンドウ 閲覧中のウィンドウとは別に、勝手に立ち上がるウィンドウ。 スパイウェアなどの
UXを向上させる５種類のアニメーションの使い方 | UX MILK
Nick Babich氏はソフトウェアディベロッパーです。大のテクノロジー好きで、UI/UXをこよなく愛します。彼のwebサイトはこちらです。http://babich.biz。 モーションはストーリーを伝えます。長く複雑なストーリーではなく、「今ここを見て下さい」や、「操作は正常に完了しました」などのシンプルなストーリーです。 しかし、アニメーションの目標は、ユーザーを楽しませることではありません。ユーザーが何が実行されているか理解し、より便利にアプリを使う方法を理解するための手助けするためにあります。このアイディアは、Zurbの記事にある次の言葉の中ではっきりと表現されています。 We’re no longer just designing static screens. We’re designing for how the user gets from those screens
ハンバーガーメニューはもう古い！代わりに使えるモバイル用ナビメニュー5つまとめ
ウェブサイトを制作しているひとなら、モバイル端末におけるハンバーガー型ナビゲーションメニューの見つけにくさと効率の悪さ、またどれだけUXデザインの邪魔になっているのか、いくつもの記事を読んだことがあるでしょう。（この問題の参考にしたい記事はこちらやこちら、こちら、こちらからどうぞ。） 幸いにも多くのサイトやアプリで、より効率的な解決法となる代替アイデアが試されています。今回紹介しているアイデアは、他のものより優れているというわけでなく、コンテンツや内容によってパフォーマンスや実行できるかどうかは変わってきます。 01. タブ型ナビゲーションメニュー もしウェブサイトやアプリの項目が限られている場合、ユーザーはできるだけ素早くそカテゴリを切り替えたいところ。そんなときは、タブ型ナビゲーションが良い解決方法となるでしょう。 タブはもっともシンプルなナビゲーションパターンですが、デザインを制作す
ハンバーガーにフロッピー…わかりにくいアイコンはUIデザインに必要なのか？
「フロッピーが保存を示すのはわかりにくい」とはしばしば耳にする議論ですが、誰にとってもわかりやすいアイコンをデザインするためにUIデザイナーはどう行動するべきでしょうか？ 世界中で画面の小さいモバイル端末が普及するにつれて、UIのスペースを有効活用するため、頻繁にアイコンが使われるようになっています。 アイコンは、言葉、ボタン、ラベル、リンクに変わり、テーマやアクションだけでなく、アイデアさえも表現してくれるうえ、スペースを生み出し、インターフェイスをシンプルにしています。 アイコンはまた「視覚的なメタファー」を使って、ユーザーにメッセージをシンプルに伝えます。一般的な例は以下です。 ：フロッピーディスクのアイコンは保存 アイコンは、シンプルかつ実用的で日常的に使われています。そして、実際に役に立っています。もし仮に、ユーザーがアイコンに関連性を感じていなかったら、または、まったく理解でき
スクロールは制御するな - Weblog - Hail2u.net
WWD Japanのウェブサイトがリニューアルして、スッキリした見やすそうな印象のものに変わった。しかし実際のところ見やすさは見せかけだけで、ナビゲーションをクリックしても見当違いのタブに切り替わったり、ニュース一覧からニュースをクリックしたら、要約ページへ移動するだけで、本文へはもう一度クリックしなければならなかったりする。中でもひどいのがMobile Safariでの閲覧だ。 このウェブサイトではスクロールをほぼ自前で制御しようとしているため、常にこのようにMobile SafariのURLバーとツールバーが上下にそれぞれ表示され続ける。その上、最上端にロゴとグローバル・ナビゲーション、最下端に広告がそれぞれ固定位置であるので、コンテンツの領域がかなり制限されている。iPhone 5SやSEどころか6+や7+でさえも致命的なのではないかと感じられる狭さだ。 とにかく文書を読ませようとい
アンチパターンと言われるカルーセルを改善するポイント
しかし、サイトのカルーセルは果たしてユーザーの役に立つものなのでしょうか？ それとも、ただコンテンツを収納するための常套手段として利用されているだけなのでしょうか。 この問いを誰かに投げかけたとしたら、カルーセルはアンチパターン（よく陥りがちな避けるべき悪い典型例）だと答えが返ってくるでしょう。カルーセルが良いデザインだと思っていない人もいるのです。 Erik Runyon氏による調査によると、サイトの訪問者のうちの１％しかカルーセル上でクリックしないということが明らかになっており、しかもそのうちの84％の人が最初のスライドをクリックしているそうです。 Jared Smith氏は自身のサイトShould I use a carousel?で、もし選択の余地があるのなら、カルーセルを使うべきではないと言っています。おそらくSmith氏の主張はLee Duddell氏の考えからきているもので、
会話型UIの未来はハイブリッドインターフェースだ | POSTD
2016年は何もかもが会話型の年です。世界中でメッセージアプリの会話が飛び交い、アプリストアでの再訪率もエンゲージメント率も信じられないほど高くなっています。全てのコミュニティ、電子マーケット、オンデマンドサービス、デートアプリ、ソーシャルゲーム、eコマースの製品が、現在あるいは近い将来において、再訪、エンゲージメント、使用を急増させるエクスペリエンスの要素としてメッセージングの機能を持つでしょう。 こういう全てのアクティビティにともなって、会話型UIに関して多くの議論が重ねられてきました。また、単純なコマンドと、単純なレスポンス(多くはテキストですが、時には写真と組み合わされることもあります)において、人間とコンピュータのコミュニケーションのパターンでメッセージや音声のやり取りがどのように組み合わされるかを議論しました。私はテキストと写真が好きなことは好きなのですが、リッチでグラフィカル
これからのUXデザインにおけるモーションデザインの重要性
モーションデザインとは空間の関係性や、機能性、あるいは意図を美しく流動的に説明する際に使われます。「モーション」というと大げさに聞こえるかもしれませんが、効果的に使用したものはさりげなく自然なものです。よく考えられたモーションデザインは、従来のデザイン要素よりもよりUXを高めることができるはずです。 今回はモーションデザインの基礎や、いつ、そしてなぜモーションデザインを使うべきなのか、そしてより良いUXのためにどうモーションデザインを使えば良いのかをお話ししましょう。 モーションを基盤としたデザイン モーションは物語を伝えることができます。アプリがどのように構成され、何ができるのかを表現できるのです。モーションはナビゲーションを再定義し、インタラクションに新たな深度をもたらし、より自然な体験を作り出すのです。クリックしたボタン、画面のトランジションのひとつひとつに物語があることを、モーショ
UI考：なぜそのセルには押せる感があるのか - Qiita
この記事の目的 セル（UITableViewCell）は iOS においてもっとも一般的なビューのひとつです。セルを利用することで、コンテンツの表示、選択、スイッチやボタンの配置、テキストフィールド、ナビゲーションを実装することができます。この辺りの具体的な実装例は『設定』や『Apple Store』が参考になるでしょう。セルにはさまざまな役割を与えられますが、どのような作法に従ってデザインされているのかよく理解する必要があります。 セルの一般的な利用作法は iOS Human Interface Guidelines で解説されていますが、私はこれを読んだだけでは十分に理解が及ばなかったため、iOS 標準アプリの事例からセルのデザインについて考察したものをまとめました。この記事では iOS の標準的なセルのデザインパターンを探り、自身のアプリにどう活かせるのかの土台となるよう考察してみま
InstagramやAirbnbなどのUIデザインに見る新しいトレンド
ミニマルなデザインがトレンドになってからしばらく経ちますが、次のトレンドはなんでしょう？ ここ数か月、デザインの最先端を行くアプリやサービスの中で、「ミニマルデザイン」を次の段階へと押し進めるものが出てきました。FacebookやAirbnb、Appleは、それぞれのプロダクトをよりシンプルに見せることに対して同様の方向を見据えており、それは、モバイルのデザインにおける「コンプレクション・リダクション」という新しいトレンドを反映したものです。 「コンプレクション・リダクション」とは 「コンプレクション・リダクション」なんて聞いたことがありませんか？ 聴いたことがないのも無理ありません、何しろ私が勝手に名付けたものですから。最近私はフラットデザインやミニマルデザインとは違う方向性を持つものが出てきたことに気付きました。 編注：Complexionは「顔色」「血色」という意味で、Reducti
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
よくわかるダメUI/UX画像コレクション - DOCUMENTS.TIPS
