モバイルUI進化中！革新的なナビゲーションメニュー実例サンプル10個まとめ
モバイル向けナビゲーションデザインには、さまざまな形やスタイルが登場しています。すべてのナビゲーションメニューが同じ構造であれば、ユーザーにとっても直感的で分かりやすいかもしれませんが、現実はそれほど単純ではありません。 独自の問題を抱えたモバイルアプリは、ナビゲーションメニューのデザインによってそれらの問題を解決することもできます。たとえば、７〜8つほどの主要メニュー項目がある場合はおそらくハンバーガーメニューを採用し、３つほどのメニュー項目の場合はタブバー形式を実装するかもしれません。 デザイナーが製品やユーザーのために最適化したナビゲーションメニュー設計では、クリエイティブで画期的なデザインがいくつか見られます。今回は、ナビゲーションメニューを作成するときに参考にしたい、革新的な実例サンプル例をまとめてご紹介します。 ハンバーガーメニューが進化中！2018年に押さえておきたい最新トレ
UIマッピングを使って、Selenium IDEのテストスクリプトを効率よくメンテナンスする | MagicPod Tech Blog | MagicPod: AIテスト自動化プラットフォーム
「name=your-name」「css=input.button」のような、操作対象の画面要素を特定するための記述(「ロケーター」と呼びます※1 )が、何箇所にも分散しています。 「UIマッピング」とは、この分散したロケーターを、UIマップファイルという1つのファイルで集中管理する手法です。(図2) ロケーターに「inputName」「buttonSearch」などのわかりやすい別名をつけ、テストスクリプト中ではロケーターでなくこの別名を使用します。 UIマッピングを行うと次のようなメリットがあります。 画面のHTMLが変わった場合に、UIマップファイル中のロケーターだけを書き換えればよいので、メンテナンスの手間が大きく軽減されます。 わかりやすい別名を使用することでテストスクリプトが読みやすくなります。 ちなみに、UIマッピングをさらに洗練させたページオブジェクトデザインパターンという
Webデザインの間違い・トップ10
ここで挙げるのは、ユーザーに対する残虐行為の、もっとも酷いものトップ10だ。極悪なユーザビリティは、かつてより少なくなったものの、Webデザインの悲劇やHTMLホラーはいまだに多い。 Top 10 Mistakes in Web Design by Jakob Nielsen 1996年5月1日 1996年以来、私は多くのWebデザインの間違いトップ10を作ってきた。全リストへのリンクは、この記事の最後に載せてある。この記事は、全リストの中からもっとも酷いものを集めた、ハイライトだ。（2004年更新） 1. 質の悪い検索エンジン 必要以上に一言一句にこだわる検索エンジンは、ユーザビリティを低下させてしまう。入力ミスや、単数／複数の違い、その他の検索語の揺れに対応できないものが、これに該当する。こういった検索エンジンは、特に高齢者のユーザーにとって使いにくいものになるが、誰にとっても問題では
JavaScript でタブ切り替え UI を実装する | WWW WATCH
先日、タブ切り換えタイプの UI を、JavaScript と CSS で簡単に実装する仕組みを探していて （他力本願）、ちょうど求めていたスクリプトが Arc... 先日、タブ切り換えタイプの UI を、JavaScript と CSS で簡単に実装する仕組みを探していて （他力本願）、ちょうど求めていたスクリプトが Archiva さんで紹介されていたので使わせていただきました。 時間がなかったので、できれば自分では書きたくないなぁ、なんかいいの公開している人いないかな～なんて思っていたのですが、おかげ様で助かりました。ということで、お礼を兼ねて紹介させていただきます。 タブ切替をサクッと実装 ： Archiva タブ切り換えを実装する JavaScript ライブラリやサンプルソースはいくつか存在しますが、私が求めていたのは JavaScript が OFF の時でもページ内リンクと
第19回 リッチなUIにおけるアクセシビリティ
Rich Internet Application（RIA）やリッチ・クライアントの開発者にとって，「アクセシビリティ」はあまり触れたくない話題の一つです。リッチ～の根底にあるのは，視覚的な効果を一つの“強み”として掲げることです。これに対しアクセシビリティは，情報を“広く平等に誰にでも”伝えるという考え方が基本にあります。ターゲットを絞るものと広げるもの――そもそもベクトルが異なるのであり，同居できない領域が存在しています。 日本でのアクセシリビリティ対応はこれから 「アクセシビリティ」の重要性は，Webの黎明期から認識され，様々な対応策が議論されてきました。しかし本格的な流れになったのは，ここ最近の話といってもいいでしょう。米国では2001年6月に，リハビリテーション法第508条によって電子・情報技術アクセシビリティ基準が定められ，実装段階に突入しています。 日本では少し遅れて，200
Expired
Expired：掲載期限切れです この記事は，ロイター・ジャパンとの契約の掲載期限（30日間）を過ぎましたので本サーバから削除しました。 このページは20秒後にNews トップページに自動的に切り替わります。
Appleのヒューマンインタフェース ガイドライン | gihyo.jp
AppleがWeb上で公開している「Apple Human Interface Guidelines」を翻訳したものです。日本語に翻訳された書籍が1989年に発刊され2004年に復刊していますが、内容がMac OS 9以前のものと古く、入手自体も困難な状況です。とりあげたページはAppleが公式に翻訳したものではありませんが、Mac OS Xに沿った内容で日本語でより多くの人が読める機会を持てるという点で、意義があるといえます。 内容は「ユーザインタフェースは、親しみ、単純さ、利用しやすさ、発見可能性を持ち合わせていること」といった汎用的なものから「ラベルは大文字から始める」といったMac OS X特有なものまで幅広いものとなっています。Mac OS Xに見られるインタフェースで、なぜあのようなデザインになっているのかを説明していたり、新しくデザインする際の心構えなども詳細に記載しているの
シニア層はなぜインターネットを使えないのか？その１ - シニア現場の隅っこ。was使いやすさを考えてみる。(アクティブシニア・シルバー層の現場から)
若者のウェブサイト操作とシニア層のウェブサイト操作には天と地ほどの違いがあります。月とすっぽん、ダイヤとタイヤ。そのくらい、違います。 わからない言葉が出てきた場合、若者は無視するかクリックするかのどちらかになります。が、シニア層はわからない言葉をしばし見つめて、「どういう意味なのかしら」と考え出します。そして「やっぱりこのホームページは私には難しいわ」。 年をとると視野も狭くなり、若者のように全体的にウェブサイトを俯瞰することができなくなります。さらに網膜にメラニン色素がたまるため、全体が黄みがかった様子になり、色の差がはっきりしないと見えにくくなります。また、若者が捉える「落ち着いた色」は「暗い色」になります。 技術的にも「使える人」と「使えない人」には雲泥の差があります。 例えば別ウィンドウが開くという操作において、若者は「どのウィンドウがどの内容を表示しているのか」を瞬間的に判断で
知っておいて損はないAJAXやCSSを駆使したタブインターフェース18種類 - GIGAZINE
技術的知識が無くてもタブを作れるフリーソフトからかなり派手な効果を伴うタブ作成ライブラリ、Yahoo！やGoogle、Adobeの作ったタブまで、いろいろと応用が利いて独自の特徴があるものをざっくりと18種類ほどピックアップしてみました。 いろいろなページやブログで頻繁に見かけるタブ方式のメニューですが、こうやって並べてみると実は見せ方も使い方も種々様々であることがよくわかります。 まずは知識不要でタブが簡単に作成できる「CSS Tab Designer」。Windows用のフリーソフトで、約60種類ものデザインが用意されています。その中にタブ方式のメニューもたくさん用意されており、ほかにも縦型のメニューやZDNet風メニューなども用意されています。 OverZone Software - CSS Tab Designer 細かいカスタマイズが可能なタブメニュー。画像を使ったサンプルも用意
Firebug
Thank you, Firebug. You made the web amazing for all! The story of Firefox and Firebug are synonymous with the rise of the web. We fought the good fight and changed how developers inspect HTML and debug JS in the browser. Firebug ushered the Web 2.0 era. Today, the work pioneered by the Firebug community through the last 12 years lives on in Firefox Developer Tools. Switch to the latest version of
エンジニアがダメなUIデザインをする原因
ことビジュアルデザインに関しての経験論としては、 ・エンジニアは画面のオブジェクトや文字の単位で画面を見る。 ・デザイナーはピクセル単位で画面を見る。 そもそも見ている解像度が違う。 エンジニアは機能を見る。デザイナーは間隔を見る・・・って言ったら言い過ぎ？ そもそもインフォメーションデザイン、インタラクションデザイン、ビジュアルデザイン、システムデザインは、すべて別個の職能だと思います。このうち、どの範囲の能力を保有してるかで、戦士にも魔法使いにもなれるんじゃないでしょうか。まぁ全部を十分に持ってる人は滅多に見ませんけどね。そういう人は、yugoさんのような世界的なアーティストとして活躍してることでしょう。 Ajaxを作る場合は、いわゆる「エンジニア」と呼ばれる人が、システムデザインはもちろん、インフォメーションデザインとインタラクションデザインのかなりの部分を担当することにならざるを得
fladdict.net blog: 「本当に素晴らしいデザイン」とは、PICASAの変なスクロールバーみたいなものを言う
お気に入り巡回先の、羨望は無知の「なぜ「デザイン」という行為、「デザイナー」という職業は誤解されるのか」や、分裂勘違い君劇場の「エンジニアの方が優れたユーザインタフェースデザインができる理由」、F's Garageの「エンジニアがダメなUIデザインをする原因」 のあたりのデザイン論が、あんまりデザインと縁のない人にデザインをわかりやすく説明してて面白い。面白いのだけどちょっと抽象的なんで、具体例の話とか書いてみるテスト。 最近、これらのエントリーで言及されるようなよいデザインを身をもって体験をした。それは画像管理ソフトPICASAのヘンテコなスクロールバー。 今まで気付かなかったけど、あのヘンなスクロールバーは単なるアヴァンギャルドやオシャレじゃあなかった。実は合理性に裏打ちされた素晴らしく美しいデザインだということに気付いた。 まずPICASAを知らない人に説明すると、このソフトのスクロ
Yahoo! Design Pattern Library
Welcome Welcome to the Yahoo! Design Pattern Library. We're thrilled to be sharing patterns and code with the web design and development community, we hope it's useful, and we look forward to your feedback. In fact, we've just launched two new Design Pattern forums: one for discussing this pattern library and another for talking about the ins and out of writing design patterns and maintain
インタフェースの話 - naoyaのはてなダイアリー
一つ前のインタフェースの話。いろいろフィードバックをいただきました。ありがとうございます。 >
すでに入り口にいるのに、ホームに導くボタンは親切か ― ＠IT
Webアプリケーションのユーザーインターフェイス[7] すでに入り口にいるのに、ホームに導くボタンは親切か 「可視性とフィードバック」 ソシオメディア 上野 学 2006/2/15 前回の「『戻る』で入力データが消えてしまうフォームはいらない」では、経験則その2として「寛容性とユーザーコントロール」の話をしました。システム側がユーザーを信頼し、ユーザーのコントロール下でユーザーの思いどおりの振る舞いをすることで、ユーザーとシステム（あるいはサービスの提供者）との間に信頼関係が生まれ、利用効率や生産性が高まっていきます。 そこで今回は、どうすればユーザーが思いどおりにシステムをコントロールできるのか、どうすればユーザーはシステムが自分の思いどおりに動いていると感じるのか、ということを考えたいと思います。これが経験則その3、「可視性とフィードバック」です。
「戻る」で入力データが消えてしまうフォームはいらない ― ＠IT
Webアプリケーションのユーザーインターフェイス[6] 「戻る」で入力データが消えてしまうフォームはいらない 「寛容性とユーザーコントロール」 ソシオメディア 上野 学 2005/12/22 前回「入力情報を預かる責任を果たせる画面デザインとは？」は、あらゆる経験則の土台となる価値観として、「ユーザーを尊重する」というユーザー中心の姿勢について述べました。今回からは、Webアプリケーションのユーザーインターフェイス（UI）・デザインを行ううえで有効な経験則を、少し具体的に考えていきたいと思います。 その前にまず、連載の第1回「ユーザーにとっては“ユーザーインターフェイス”こそが製品そのもの」で触れた HCI（Human-Computer Interaction）の分野でよく挙げられる、コンピュータを用いた対話型システムの設計原則を紹介しておきます。ここでいう「対話型システム」とは、ユーザー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ソシオメディア | UIデザインパターン
JavaScriptを利用してフォームの二重送信を防止する：CodeZine
@IT連載 Webアプリケーションのユーザーインターフェイス - memo.xight.org
Background Image Maker