Progressive Disclosure と Progressive Reduction | Accessible & Usable
公開日 : 2014年5月21日 (2014年6月4日 更新) カテゴリー : ユーザビリティ / 情報設計 (IA) Web サイト上に提示される情報は、「シンプル」であるに越したことはありません。ユーザーの目的達成に関係しない情報ノイズは、極力、無いのがよいと言えるでしょう。 そして、その情報が不要なノイズかどうかは、ユーザーの目的の大小や粒度、ユーザー自身の当該分野に対するリテラシー (理解の度合い)、ユーザーの利用コンテキスト、などによって異なります。 この記事では、ユーザーに合わせて情報ノイズを排除する考えかたとして、「Progressive Disclosure」と「Progressive Reduction」について考えてみたいと思います。 Progressive Disclosure (プログレッシブ ディスクロージャー) 「Progressive Disclosure」と
【スマホEFO】ソフトウェアキーボードのユーザビリティ向上テクニック | UI改善ブログ by f-tra
スマートフォンの文字入力は、項目をフォーカスしたときに画面下部に現れるソフトウェアキーボード上で行われます。 PCのキーボードに比べはるかに物理的サイズが小さく、入力内容によっては入力モードやパネルの切替えも必要となります。思い通りに操作できないユーザーにとってはストレスを感じる機会はたいへん多いことでしょう。 しかしながら、ソフトウェアキーボードには、属性値の指定などにより、入力の利便性をかなり向上させるための手法が複数存在しています。 この手法をうまく使えているかどうかが、スマートフォンでの入力ユーザリティを大きく左右するといっても過言ではありません。 本日はそんなソフトウェアキーボードの利便性向上に必須のポイントをご紹介していきます。 それではまずは、ポイントのご紹介です。 ソフトウェアキーボードに関連するテクニックや注意点について、大きく下記の6点にまとめました。 最適なキーボード
Retinaでもボケない「シンボルアイコン」を使いこなそう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも！デザイナの王です。 2012もいよいよ12月を迎え、果てして2013年は来るのかと、わくわくしている今日この頃です。 ここ最近、AppleのRetinaを皮切りに、超高精細ディスプレイが色んなメーカーから出ているニュースが目に付く。 有名所ではシャープのIGZO（約500ppi）、ジャパンディスプレイのLTPS（約650ppi）などがありますよね、iPhoneのRetinaをぶっちぎりで凌駕してしまうという！4K時代の到来を予感させる！（その前に地球が終わらなければいいのだが！） ということで、来るRetina全盛時代に備えるべく、どんなにモンスター級の高解像度のデバイスでも綺麗に表示する「シンボルフォント」を最近使い始めました。今回はそんな素敵なシンボルフォントの導入法を紹介したいと思います。 そもそも♥「シンボルフォント」♥って何？ 読んで字の如し、「図形のフォント」です。タイ
ユニクロはなぜ「カテゴリ検索」をなくしたのか リニューアルしたスマホECサイトをチェック
リニューアルしたユニクロのスマホECサイトをチェック！ 最近、ユニクロのスマホECサイトがリニューアルしました。 ユニクロは、スマホに限らずWeb全般で革新的なUXを実現しています。Web表現のオリジナリティを追究しつつ、ユーザーに新しい導線を提案しています。 誰にでも使いやすく便利で、なおかつ、デザインが洗練されている。ユニクロのブランド意義にも通じる考えが背景にあります。デザインの細かいこだわりも見逃せません。 カテゴリー検索がない！新しいスマホサイトのTOP画面の構成 一般的にアパレルECサイトではTOP画面に「トップス」「パンツ」「バッグ」「シューズ」「アクセサリー」等の大分類があり、そこから「トップス」を選択し、「Tシャツ」「シャツ」「ニット」というように小分類へ進みます。ZOZOTOWNなどでも採用されているので、ユーザーも迷わず使いこなすことができる導線であるはずです。 しか
MobileMozaic, a gallery of the very best designed iphone applications
Several parents, grandparents, and even teachers consider smartphones to be negatively affecting the education of students. However, they are not that bad if used wisely. Many apps are out in the market that can be worth the time spent for them. Choosing them can even simplify the life of students. Here is the list of the top 10 Mobile Phone Apps for Students in 2023. Notion The notion is an app b
日本のスマホサイトは2年間でこんなに変わった (1/4)
スマートフォンやタブレット端末といった、いわゆる「スマートデバイス」を意識したWebサイト制作はもはや常識となっている。各企業のWebサイトは、次のような方法でスマートデバイスに対応していることがほとんどだろう。 スマートフォン向け専用サイトを構築する レスポンシブWebデザインで Webサイトを構築する viewportを調整する Web Professionalでは、2011年2月、有名企業のWebサイトがスマートフォンにどのように対応しているかを紹介した。 これらのサイトは、2年経ってどのような変化を遂げたのか。本記事では、取り上げたサイトに再び訪れ、サイトデザインのトレンドがどう移り変わったのかを観察。日本のスマホサイトの「BEFORE & AFTER」を紹介しよう。 半数以上のサイトがリニューアル まず、調査したサイト数に対してリニューアルしたサイトと、大きくは変化していないサイ
ＦＸライントレード大全 ヤフオクのことを知りたいのなら… ｜ 口コミ・レビュー投稿 E-BOOKデータベース
ＦＸライントレード大全 ヤフオクのことを調べているなら、このリンクをしっかりと確認したほうがいいです。 そして、あなたがＦＸライントレード大全を買う予定なら、このサイトで、ＦＸライントレード大全により何が可能になるのか、しっかりと把握した上で購入されることをおすすめします。 また、購入者のレビューが書かれていれば、そちらについてもよく確認しましょう。 下のＦＸライントレード大全に関した説明も役に立つかもしれません。 商品名称：ＦＸライントレード大全 商品内容紹介：ゴールドナビ式FX完全承継プロジェクト。究極のFX５分足ブレイク手法がついに完成。ライントレードをマスターしたい方向けの本格的ＦＸ教材。簡単ルールを淡々と繰り返す究極にシンプルかつ損小利大な手法です。 商品価格：49800円 販売者名：LTCM合同会社 決済代行プラットフォーム：infotop 発売元公式サイト このページでは、Ｆ
Retinaサポートその二歩目 – Taiyo Fujii, writer
先日公開したRetinaサポートWebへの第一歩はMacお宝鑑定団Blogでも採り上げていただいたため、開設したばかりの Blog にはもったいないほどの閲覧数となった。感謝！ 前回のエントリーでは<img>要素の画像を置き換える方法を説明した。投稿エントリーの画像を置き換えていくにはあの方法が適していると思うが、今回はバックグラウンド画像や Web サイトで何度も登場する固定画像を、スタイルシートを用いて変更する方法を説明する。 今日からこのブログのメニューは Retina 対応のテクスチャーを背景画像として登録している。Retina 対応でない環境で見るとただのグラデーションが表示されるが、 Retina ディスプレイで見ると細かなメッシュパターンがメニューの背景画像として現れる。しかし、こうやって並べると愕然とするね。 [retina normal=”http://blog.taiy
[CSS]3ステップでマスターする、スマートフォンやデスクトップなど異なるサイズごとに最適なレイアウトを提供するResponsive Web Desingのチュートリアル
Media Queries初心者でも分かりやすく解説された、スマートフォンやタブレットやデスクトップなど異なる表示サイズごとに最適なレイアウトを提供するResponsive Web Desingのチュートリアルを紹介します。 Responsive Design in 3 Steps [ad#ad-2] 下記は各ポイントを意訳したものです。 Step 1: METAタグ Step 2: HTMLの構造 Step 3: Media Queries さらに実践的な使い方を学びたい人に Step 1: METAタグ スマートフォンなどで採用されているモバイル用ブラウザは、表示するHTMLページの大きさをビューポートの幅に（主に）縮小してフィットさせます。 まずは、この設定をMETAタグを使用して等倍で表示するようにしましょう。 HTML <head>～</head>に下記を記述します。 <meta
[CSS]スマフォからデスクトップまで最適なレイアウトを提供する、emベースのフレームワーク -Goldilocks Approach
iPhoneをはじめとするスマートフォンから、iPadなどのタブレット、ノートブックやネットブック、デスクトップなど、さまざまなデバイスにMedia Queriesを使用して最適なレイアウトを提供するフレームワークを紹介します。 The Goldilocks Approach [ad#ad-2] The Goldilocks Approachの主な特徴 The Goldilocks Approachのケーススタディ The Goldilocks Approachのアプローチ The Goldilocks Approachの主な特徴 The Goldilocks Approachは、EM、Max-Width、Media Queriesを組み合わせ、3つのレイアウトを提供します。 multi column（マルチカラム） 大きいサイズ用 narrow column（ナロウカラム） 小さいサイズ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
事例紹介 | 株式会社インフォバーン