東京メトロの行き先表示器がひどい
最近千代田線のホームにある行き先表示器が新しいものに交換されたんだけど、これがあまりにひどすぎて毎日本当に困っている。どうにかして欲しい。 コレ＞http://www.tokyometro.jp/news/images_h/metroNews20160803_64-2.pdf 【ひどい点】 ・これまでの行き先表示器より行き先を示す文字サイズが格段に小さくなって、遠くからでは全く読めなくなった。行き先表示器として致命的。 ・表示器内に情報を詰め込みすぎて、何が何やらさっぱりわからない。これまでは基本的に「先発列車の時刻」「先発列車の行き先」「次発列車の時刻」「次発列車の行き先」の４つの要素しか表示されていなかったのが、新しい表示器ではこれらの要素に加えて「先発・次発の表示」「行き先のひらがな表示」「先発と次発の駅ナンバリング表示」「電車の現在位置」「お知らせの文字スクロール」が常に同じ画面上
ソシオメディア | OOUI – オブジェクトベースのUIモデリング
最近、OOUX という言葉を見聞きしました。これはオブジェクト指向の利用者体験（Object-Oriented User Experience）のことで、いくつかの記事を読んだところ、アプリケーション設計において画面とデータを対応づける際にオブジェクトを手掛かりにするという方法論のようです。つまり OOUX は「オブジェクトベースのUIモデリング」と言い換えることができそうです。そうすると実は以前からそのようなデザイン手法はあり、「OOUI（オブジェクト指向ユーザーインターフェース）」と呼ばれていたのです。最近になって OOUX という言葉が使われるのは、OOUI のことを知らなかったか、もしくは流行語である「UX」を用いた方がかっこいいと考えたからではないでしょうか。 「オブジェクトベースのUIモデリング」というデザイン手法は、GUI アプリケーションをデザインする際の基本的なテクニック
多くのサイドバーが役に立っていない理由とは？
YonaはCodal社のテクニカルライターです。彼はコンテンツ戦略、文章、ブログ、編集の責任者です。また多岐にわたる記事を提供するため、Codal社のUX、発展、マーケティングそして管理チームと密接に働いています。 Webサイトにおいて、サイドバーは必要でしょうか？ 情報交換をとても重要視している業界ですから、サイドバーが流行してスタンダードな手法となったのはある意味必然といえば必然です。ですが、サイドバーはつまるところただのリンク集でしか無く、補足的な情報を入れておく程度の場所です。 これを言い切ることで私を嫌いにならないで欲しいのですが、UXデザイナーはサイドバーに頼りすぎなのです。 例えばUXデザイナーの方にサイドバーを使わなければいけない理由を聞いてみてください。おそらく合理的な答えを導き出すまで相当な時間がかかるのではないでしょうか。 では、サイドバーに対抗できるものはあるのでし
バッドUIを改善する方法 ― UIの「5つの状態」を考える | POSTD
(訳注：2020/08/22、画像と動画が正しく表示されていなかったためリンクを修正しました。) こんにちは。このブログは12月にO’Reillyから出版予定の私の著書『 Designing Products People Love 』からの抜粋です。ぜひ本も読んでみてください。また、FacebookやTwitter、 Slackなどで活躍されている20人以上のプロダクトデザイナーにインタビューもしています。* 無味乾燥なUIを経験したことはありますか？ 何か が足りないと感じてしまうようなUIを作ってしまったことはありませんか？ もしそうであれば、使い勝手の悪いUIを経験したのだと思います。 使い勝手の悪いUIには進捗インジケータがありません。ユーザにどこで障害が起きたのか知らせてくれません。怖いエラーメッセージでも表示してくれれば、なお良いのですが。わずかなデータのみの奇妙なグラフです
意味不明なことばかり言ってるUXデザイナー達の代わりに「UXデザインとは何か」を端的に説明しよう
釣りタイトルですみません。 でもね、世に言う「UXマン」っているじゃないですか。 いかにも自分は上流工程だと言わんばかりに様々なフレームワークや聞こえはいい理論を振りかざしているにも関わらず、自分では手を動かしてモノをつくらないし、いざつくってもらったらアチャーなアウトプットだす人たち。 そもそも「UXデザイン」には色んな解釈があったところに、“つくってなんぼ”のWeb業界にそういう人たちが少なからずいる（し、えてしてなぜかデカイ顔をしている）もんだから、もはやUXデザイナーという職そのものが胡散臭いと思われていることが多いんですよね。 前職の話になりますが、当初「UX推進部」という部署に属していたので、勤務外にもUX系の勉強会にはたくさん参加してみたけれど、ほとんどくっそ当たり前のことしか言ってない講演とか、Sketchはいいぞ〜って永遠に言ってるだけの集まりとか、本当に参加する価値がな
エレベーターを動かしたい方向を押すおばあちゃん
これはうちのマンションに住むおっさんから家族が聞いた話なのだが、そのおばあちゃんは自分基準でなくエレベーター基準で上下のボタンを押す。4Fに住んでるらしいのだが、外出時にエレベーターが1Fにあればまず↑を押し、来たら乗り込み↓を押す。他に乗りたい人が他階にいなければ無事外出。大概はこれでいいのだがその時5F以上に降りたくて↓を押した人が他にいたらその階まで乗って行くことになる。 ここまでならこのばあちゃんが損するだけだが、問題は1Fから乗って5F以上に向かう人がいる場合。ばあちゃんの↑ボタンにより4Fで一旦止まる。マンションで上る途中で止まるって1Fから乗り合わせた人が先に降りる時以外にそうないからこれはイラッとくるかもしれない。おっさんは何度も経験してるらしく、ばあちゃんは意外に思うような表情で「ああっ…」とか言うだけらしい。 この前、ばあちゃんが損するバージョンに遭遇した（本人か確かめ
16種類（45カテゴリ）の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選（スライド付）
2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今
User Onboarding | A frequently-updated compendium of web app first-run experiences
User Onboarding is the process of radically increasing the likelihood that new users become successful when adopting your product. Teardowns Let's learn some lessons from how popular web apps do it! Here's the latest: And here are some other recent ones: WordPress QuickBooks Bitcoin » See all teardowns Onboarding Design Articles Never Mix Up Features with Benefits Ever Again… Bulletproof User Onbo
これデザインしたの誰ですか！！（まさかの第4弾。。） : himag
2015年4月に創刊したhimagは「ライブドアブログ OF THE YEAR 2015」話題賞を受賞！8年目に入り累計記事3600本、来場者426万人、631万PVのライフログに成長しました！
確実に良くするUI/UX設計
日経電子版のリニューアルで、コンセプトモデル設計とプロダクト監修をさせていただいた。 超大型アプリを完全リニューアルするとき、KPIを落とす事なく、どのように整合性やユーザー利便性を担保していくか。 「日経電子版×Sansanアプリ開発プロジェクト成功への道〜アプリ開発者勉強会Vol.2」より http://connpass.com/event/16187/
分かりやすいWeb入力フォームのための十戒 | POSTD
1. 各々の入力欄に、常に見えて分かりやすいラベルを付けよ 記入する前の入力欄にだけ、フォームのラベルを表示するのがWebデザインの主流になっています。これはユーザネームやパスワードなどを入力する際にはシンプルで使い勝手がいいのですが、それ以上に長い文字列になると少々勝手が悪くなります。 そのため余白があるのであれば、ラベルを表示すべきです 特に、長いフォームの場合では、ユーザは入力したものを見直すでしょう。どのラベルが入力欄と合致するのか分からなければ、間違いがないよう見直すことなどできるはずがありません。 改善前:入力欄中にラベルが記入してあります。今は見やすいかもしれません。 しかしフォームに入力するとラベルが見えなくなってしまい、間違いを見つけにくくなってしまいます。 改善後:それぞれの入力欄に、クリアでいつでも見えるラベルを付けましょう。 2. 十分な大きさのフォントを使用せよ
アステラスホームページ | アステラス製薬
このウェブサイトに掲載している製品に関する情報は、かかる国によって、適切ではない情報（例：承認と異なる投与量、適応症、および製品名など）が含まれている可能性があります。このウェブサイトに掲載されている製品および開発中の化合物に関する情報は、弊社から推奨するものではなく、プロモーションや広告に該当するものではありません。 このウェブサイトに掲載される製品に関するすべての情報は、医学的なアドバイスを目的として提供しているものではなく、またかかりつけの医師などの指示の代用になるものでもございません。
64のマリオのジュゲムがすごかったところ
64のマリオってのはすごかった。新機種を担う任天堂の全力投球だった。 今日指摘したいのは、マリオの動きをジュゲムが撮影している、という構造がすごいという点だ。 すなわちゲームで描かれる世界が誰の視点のものか？ という問題へのエクスキューズとしてジュゲムがある。 ジュゲムが撮影していることで、なぜ私たちはマリオを見ることができるのか？ という問題を（ゲームの上ではあるが）見事に解決させている。 かつてファミコン時代、私たちはマリオを横から俯瞰して眺めていた。 マリオは左から右へ進んでいく。よく指摘されることだがこれは実は冷静に考えておかしい。 マリオはクリボーをジャンプすることでしかかわせない。横にかわせない。 そして、そんな構成を私たちは横から見ている。 プレイは勿論快適にできるが、視線の問題は現実的ではない。ゲーム的な表現で言うとリアリティがない。 ３Dへのあこがれがゲームの進化とともに
横にはみ出すナビゲーション
今回(2014年9月)のAppleのウェブサイトのリニューアルにはいくつもの興味深い点がある。ナビゲーションの二本線とバツ印が共にインラインのSVGなことなどもそうだし、多くのポーションがモダナイズされたにも関わらずPrototype.jsを継続利用したこともすごく気になる。その中でも一番気になったのは狭い画面向けの横にはみ出すナビゲーションだ。 これまでの通常は隠されている狭い画面向けのナビゲーションの多くは、次の3つに大別されていた。 ドロップダウン オーバーレイ ドロワー 極稀にアイコンのみのコンパクトに横へ並べたものもあったが、いずれの場合もナビゲーションの項目は縦に並んでいることがほとんどだ。一覧性に富み、アクセス性が高く、ユーザーの学習コストも低い。 これに対して横にはみ出すナビゲーションは、項目を画面外にはみ出すように横に並べ、スワイプでスクロールして探させるという形のものだ
入力フォームのラベルをフワッと浮かせるパターンの別解
Float Label Patternはかっこよくて、単にラベルをプレースホルダーにするよりはマシなので使いたくなる。しかしラベルとプレースホルダーは別に提供してやりたい。機能も違うものなので、その方がきっと良いはずだ。そこで別解として、ラベルが斜めに動くものを考えた。もちろんCSSのみで実装している。 Demo: Alternative Float Label Pattern 入力フォームにフォーカスすると、左にあるラベルが斜め右上に少し移動すると同時に入力フォームが左へ拡大する。これによりFloat Label Patternと同じような結果になるが、デフォルトの状態ではラベルとプレースホルダーを両立させることができる。 ラベルを入力フォームのフォーカスと連携させるには、隣接兄弟セレクターを使うくらいしか方法はなさそうなので、マークアップは入力フォーム→ラベルの順にする必要がある。また
Free Web & Mobile (iOS, Android) Prototyping and UI Mockup Tool | InVision
Freehand – The all-in-one collaborative workspaceUnlock your team’s full potential – ideate, plan, execute, and track projects with Freehand There is something so natural about collaborating in Freehand. It feels like you’re holding a marker, and making ideas happen. I can’t imagine doing that in another tool. It captures that human essence of being in person and talking to someone that is right n
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
総数 65,600 の無料アイコン素材 - 史上最大のアイコン素材集
経済産業省 - 消費者向けオンラインサービスにおける通知と同意・選択 に関するガイドライン
Designers Hack
排卵期予測アプリ「Clue」がデザインにピンクを使わない理由