任天堂のあの人気アプリはなぜストレスなのか？ 待ち時間から考えるUX - WPJ
待ち時間のストレスを軽減させる方法といえば、プログレスバーやスピナーが定番。最近は「スケルトンスクリーン」という手法も増えているようです。 いかに優れたデザインのユーザーインターフェイスであっても、UI（画面）が読み込まれるまでには待ち時間が必ず生じます。 MITが2014年に実施した調査によると、人は個別の画像をわずか13ミリ秒で認知できるものの、どこに着目すべきかを決定するまでには100〜140ミリ秒が必要とのこと。このことは、人がUIの状態変化を認識するまでに、実際には200ミリ秒前後の時間が必要だということを示唆しています。 200ミリ秒から1秒の間に、ユーザーは自分たちの操作が流れに乗っていると感じます。画面が動かないまま1秒が過ぎると、興味の対象がほかへ移り始め、10秒を超えるとユーザーの関心はすべて失われる傾向にあります。 ユーザーを満足させるには、処理中であることを示す何か
間違えると逆効果？入力ミスをその場で知らせる「リアルタイムアラート」のトリセツ | UI改善ブログ by f-tra
リアルタイムアラート（バリデーション）とは、ユーザーがフォームに入力した内容についてミスがないかを判定し、修正が必要な場合にその場でアラート表示する機能で、EFOに大きな効果をもたらすテクニックのひとつです。すでにご担当のフォームにリアルタイムアラート機能を導入しているという方も多くいらっしゃるかと思います。 その場で修正を促すことで、送信ボタン押下時にエラーがずらりと表示されるあのガッカリ感やイライラ、そしてそのストレスによる離脱までも防止してくれるリアルタイムアラートは、EFOになくてはならないもの。しかし、ただ導入すればいいというわけではなく、使い方を間違えれば、かえってユーザーのストレスを助長してしまう可能性も。 せっかく導入するならば、ぜひ正しく活用していただきたいリアルタイムアラート。今回は導入時に気をつけたいポイントをご紹介したいと思います。 デザインに関するポイント まずは
最近のWebデザインで採用されているレイアウト72種類を収録した無料のUI素材（PSD, AI, Sketch） -UI Tiles
最近のWebデザインでよく利用される1カラム、2カラム、3カラム、カード型、ボード型の基本的なグリッドをはじめ、ランディングページ、プロダクトページ、ギャラリー、ポートフォリオ、カート、FAQ、コンタクト、マップなど、さまざまなレイアウトが用意されたワイヤーフレームやフローチャートを作成するための素材を紹介します。 UI Titles UI TILES: WEBSITE FLOWCHARTS ダウンロードできる素材のフォーマットは、4種類。 .psd（72種類のレイアウトとチャート） .ai（72種類のレイアウトとチャート） .sketch（72種類のレイアウトとチャート） .png（72種類の各レイアウト） 各フォーマットにはそれぞれ72種類のレイアウトとチャートが揃っており、ワイヤフレームやフローチャートやサイトマップとして利用できます。
16種類（45カテゴリ）の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選（スライド付）
2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今
【2016年】ディレクター必見！スマホ用グローバルナビゲーションのトレンド7選
近年、急速にスマートフォンの普及が進む中、PC版とは異なるUI・UXで、スマートフォン用に制作されたWebサイトが増えています。 これまでは「PC」が主体で制作されていたWebサイトですが、若い世代では"PCを所有していない人"も多く、スマートフォンだけで携帯電話とPC、双方を兼ねて使っているという人も少なくありません。 そのため、スマートフォンサイト（以下、スマホサイト）のUI・UXに関しても、より使いやすさというのが求められる時代になってきていて、必要とされるポイントとしては、画面が小さいため、視認性や可読性の高さ、タップのしやすさなどになります。 そこでユーザをストレスなく、目的とするページに遷移させるためにも重要となってくるのがグローバルナビゲーション（グローバルメニュー）の役割です。 今回は、実例をもとに、様々なスマホサイトのグローバルメニューをご紹介します。 各グローバルメニュ
数千ページのワイヤーフレームを書いてきたWebディレクターがUI設計時に気を付けている８つのこと。 - 笑顔を創りたいWebディレクターの日常
なんかすごい思い付きで www.adventar.org に参加してみたんですけども。 気づいたらいつの間にか自分の日になっていて面倒くさくなってきて激しく後悔したびっくりしたという。 ぼくはWebディレクターでありデザイナーさんではないし、すてきデザインができるようなビジュアルセンスのようなものは、誠に残念ながら母上から授けられずにこの世に生を受けているものですから、"いわゆる"デザインはやらないんですが、その前の画面設計についてはワイヤーフレームなるものでいっつもやっておりますので、その観点からなんか書きましょうとそういうことですお母様（謎） そんなわけで、うぇぶぎょうかいのむめいでぃれくたーのお時間です。 Webディレクターとしてはえーと、もうすぐ丸１２年になります。そうするとまあ、たぶん数千ページは「ワイヤーフレーム」をつくってきたんじゃないかと思います。正確な数字はわかんないです
InstagramやAirbnbなどのUIデザインに見る新しいトレンド
ミニマルなデザインがトレンドになってからしばらく経ちますが、次のトレンドはなんでしょう？ ここ数か月、デザインの最先端を行くアプリやサービスの中で、「ミニマルデザイン」を次の段階へと押し進めるものが出てきました。FacebookやAirbnb、Appleは、それぞれのプロダクトをよりシンプルに見せることに対して同様の方向を見据えており、それは、モバイルのデザインにおける「コンプレクション・リダクション」という新しいトレンドを反映したものです。 「コンプレクション・リダクション」とは 「コンプレクション・リダクション」なんて聞いたことがありませんか？ 聴いたことがないのも無理ありません、何しろ私が勝手に名付けたものですから。最近私はフラットデザインやミニマルデザインとは違う方向性を持つものが出てきたことに気付きました。 編注：Complexionは「顔色」「血色」という意味で、Reducti
ユーザーをだますのが目的のデザイン「ダークパターン」いろいろ
by Thomas Guignard インターネットを利用していると、自分の意図しない予想外の操作がなされてしまい戸惑うことがたまにありますが、それはそもそも人をだますことを目的としたデザインかもしれません。そんな人をだますことを目的とするユーザーインターフェースは「ダークパターン」と命名され、その手法がまとめられています。 Dark Patterns - User Interfaces Designed to Trick People http://darkpatterns.org/ ダークパターンとは人をだます目的で作られたユーザーインターフェースであり、決してミスデザインではありません。それらは人間の心理をよく理解して注意深く作られていますが、ユーザーの利益はまったく考えられていません。 ロンドンのデザイナーであるHarry Brignullさんは、ダークパターンについてまとめたサイ
ddSlick - a jQuery plugin for custom drop down with images
Design with PC Subscribe to this blogStarter. Entrepreneur. Web Developer. Co founded Mr Right and Kaaryaa Labs. BlogHovercardddSlick Ever wanted a drop down with images? Well, You now have a plugin for that! A free light weight jQuery plugin that allows you to create a custom drop down with images and description. What is so cool about this plugin! Adds images and description to otherwise boring
【10選 】jQueryを使ってselectフォームをかっこ良く装飾するプラグイン | Stronghold Archive
どうもこんばんは。Toshikuraです。今回のTipsは【【10選 】jQueryを使ってselectフォームをかっこ良く装飾するプラグイン】です。フォーム関連の連続記事も終盤です。セレクトやチェックボックス関連の装飾用プラグインは数々ございますが、今回比較的使いやすそうなものをピックアップしてみました。もし機会があればご活用下さい。 フォームの使いやすさやデザイン性を向上させる33の方法 これまで何回かに分けてWEBフォーム関連の記事を書いてきましたがフォームの使いやすさやデザイン性を向上させる33の方法としてまとめました。お問い合わせや資料請求等、フォームの最適化ができれば少なからず成果に直結するのではないかと思います。興味がございましたらぜひ。
Intro.js - Step-by-step guide and feature introduction for your website
No dependencies, fast and small 10KB JavaScript and 2.5KB CSS, that's all (minified, gzipped). User-friendly Navigate using keyboard or mouse. Easily change the themes for your website. Browser compatibility Works on Google Chrome, Mozilla Firefox, Opera, Safari and even Internet Explorer. Why using Intro.js? When new users visit your website or product you should demonstrate your product features
ソシオメディア | フラットデザインはUIを進化させるか
ウェブやアプリのデザイナーであれば、ここ1〜2年のUIトレンドであるフラットデザインについてご存じだと思います。すでにこのトレンドを意識して実践しているかもしれません。今回はフラットデザインの特徴とそのポテンシャルについて考えてみます。 フラットデザインとは、画面に表示するボタンやメニューなどのUI要素を非常に平坦な見た目にするという表現手法です。ウェブでもアプリでも今やこのフラットデザインを取り入れているものが沢山ありますが、中でも代表的なのは、Windows 8 の Modern UI と Google の一連のサービスでしょう。 フラットデザインと言っても、もちろん明確な定義があるわけではなく、フラット度合いは様々に試されていますが、一般的な特徴をあげてみます。 UI要素の「塗り」に、グラデーションやテクスチャを使わず、単色にする ドロップシャドウやベベルといった立体感を出す表現を用
Design Kindle | Free Premium Web Design Resources
Moonify UI 3405 Joachim Löfstedt Sliding Tags 852 Thomas Bossée Grunge Textures Vol. 2 815 Caleb Kimbrough Butterscotch UI Kit 8259 Thomas Bossée Socialis 6562 Victor Ingman Petite Icons 2494 Monsters Lab Design Portfolio Icons Premium Prekesh Chavda Grunge Textures Vol. 1 1463 Caleb Kimbrough Glyph Icons 5184 Pranav Pramod RSS Tweet Like About Design Kindle We love how helpful the web design comm
流行りのレスポンシブ・ウェブデザイン！ よく使われるデザインパターンを集めてみた！
流行りのレスポンシブ・ウェブデザイン！ よく使われるデザインパターンを集めてみた！ 2013.01.18 | この方法お勧めです！ | サイト推薦！ tips | WordPress | ほらみんなも！ | デザイン | レスポンシブ あけましておめでとうございます！ 今いる場所がシアター！Huluの動画サイトにはまり、かなり引きこもりがちなブラウンです。 超寝不足。。。やばいです。。。 今回は流行りの【レスポンシブ・ウェブデザイン】について、デザイナー目線の記事を書こうと思います。 少し前までは『レスポンシブ！？そんなんいらんわっ！！無視や！無視っ！！』って思って勉強することから逃げていました。しかしもうダメのようです… もうIT業界では、レスポンシブ・ウェブデザインは当たり前って流れがきてます。確かにアクセス解析ではPCよりスマホやタブレットからの方が多いですし。 とにかく、今回レスポ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Floating Action Button - Materialize
Material Design
Apple Design Resources
https://jp.techcrunch.com/2016/05/31/20160528what-ux-designers-can-learn-from-1990s-japanese-video-games/
Razorfish: The Agency for Marketing, Experience & Enterprise Designs for the Digital World
RepixDesign Store | User Interfaces Design
