小さい子どもにコンピュータを触らせるということ - ビスケットのあれこれ
ビスケットは，開発して新しい機能を追加したときなど，必ず子どもたちが使っている様子を自分目で見てどんな風に使っているかを見てきます（最近はその暇が無くて他人に任せていたりして，かなりまずいんですが）．3年前くらいの面白いエピソードをご紹介しましょう． ちょうど，Androidタブレットで動くビスケットを開発していて（これはまた一般には配布していません．実験環境だけです），それがどのように子どもたちに使われるか見に行きました．僕としても指で直接操作するタブレットのUIの開発は初めてで．実は，マウスとタッチペンの操作は結構似ています．どちらも，非常に小さいエリアを結構正確にポイントできて，ドラッグもできますから．どちらかというと，ペンの方がドラッグが得意でしたね．小さい子はマウスクリックが全然出来ないとか（ボタンを押すときに指先だけ押すということができないので，手を握ってしまって，その結果マウ
UIの改悪がUXを改善させる場合 - A Successful Failure
2013年01月20日 UIの改悪がUXを改善させる場合 Tweet Good UI≠Good UX UIとUXについてはその理解について多くの議論がなされてきた。たとえば、Googleの及川氏は「写真が語るUXとUIの違い」というエントリにおいてコーンフレークの例を元にUIとUXについて説明したが、その後、ERATOの渡邊氏が「1分でわかるUIとUXをわかりやすく説明する写真とお話」というエントリにおいて、ATMを例によりわかりやすい説明を挙げている（次の写真は当該エントリからの引用）。 この例ではたとえUIが素晴らしくても、そのATMは時間がかかるため、長い待ち時間ができ、結果としてUXが損なわれる場合を示している。 しかしながら、実際にはATMの劣悪なUIが悪いUXの原因となっている可能性があり、本当にこのATMのUIは素晴らしいのかという疑問が残る。つまり「Good UI ≠ Go
デザイナーに丸投げしちゃいがちなUIというもの - ぼくはまちちゃん！(Hatena)
こんにちはこんにちは！！ 今日はちょっとUIについて思うことのお話をしたいと思います。 ぼくは以前、ゲーム業界にいたんだけど、そこでは、 いわゆるグラフィックデザインを専門にしている人に 「この画面のUIおねがいね」と丸投げする光景をよく見ました。 だけど、見た目が綺麗なデザインを仕上げるのと 使い勝手を考慮したユーザーインターフェイスを設計するのとでは、 考え方も、必要なスキルもまるで違うものだと思う。 情報や機能を、どのようにユーザーに提供するか。 これは画面上の配置や見た目だけの話だけじゃなくって、 情報の階層化や、いつどのタイミングで見せるかといったことまで考えなきゃならない。 たとえばゲームなら、初めからボタンだらけの画面にするのではなくて、 ゲームの進み具合、ユーザーの習熟度に応じて段階的に機能を見せるとかね。 細かい話なら、ボタンを押した時に反応するのか、 離した時に反応する
COOKPADの「伏せ字にせず入力」ボタンは素晴らしい
@tokuhiromから教えてもらったのですが、COOKPADのスマートフォン向けWebサイトのログインページには、パスワードを「伏せ字にせず入力」するボタンがついているのですね。 さっそく見てみましょう。まずはログイン画面です。パスワード欄の下側に、「伏せ字にせず入力」ボタンが見えます。 「元に戻す」ボタンを押すと、伏せ字に戻ります。 僕はこれを知って興奮しました。なぜなら、拙著「体系的に学ぶ 安全なWebアプリケーションの作り方」には以下のように書いたからです（P337～P338）。 パスワード入力欄のマスク表示は、現在の常識的なガイドラインですが、実は筆者自身は疑問を持っています。パスワード入力欄をマスク表示にすると、記号や大文字・小文字交じりの安全なパスワードを入力しにくくなるので、利用者は簡単な（危険な）パスワードを好むようになり、かえって安全性を阻害するリスクの方が大きいのでは
iPhoneやAndroidのUIパターンを収集するシンプルで見やすいギャラリーサイト・Patterns of Design - かちびと.net
いくつか同じようなギャラリーサイトは ありますが、こちらもなかなか見やすか ったのでメモ。スマートフォンのUIの パターンギャラリーサイトです。スマー トフォンに限らず、通常のWebサイトの パーツデザインの参考にもなりそうです。 特にスマートフォンのUIは細かい部分のこだわりが見られてとても参考になりますので見ておいて損は無いかと思います。 シンプルな作りです。パーツはカテゴリで分けられていて探しやすいです。ちょっと重いかな・・ 例えばこちらはグリッドのカテゴリ。同じ幅、同じ高さという限られた空間の中で、様々な工夫が見られます。 クリックするとその場でLightbox風にポップアップします。iTuneへのリンクもあるので確認しやすいですね。 同じようなギャラリーサイト 似たようなサイトは沢山あるので合わせてチェックしてみてはいかがでしょう。 Mobile UI Patterns pttr
勝手にリデザイン：新宿高層ビルの館内施設案内板
勝手にリデザイン：新宿高層ビルの館内施設案内板 新宿のとある高層ビルの館内案内標識が話題に。後学のために、仕様・問題点を整理、改善案の作成を行ってみました time2011/09/08 hatenabookmark- Twitterで、あるサイン（案内板）のことが話題になっていました。新宿のあるビルの案内図のようですが、わかりづらいことが問題になっているようです。 …確かにこれはわかりません。トイレを探している時に遭遇したら結構辛いと思いますね。でも、なぜわかりにくいのか、どういう改善案が考えられるのか、もう少し考えてみることにしました。 仕様 まず、この図から読み取れる情報だけでは何が「正解」かわからないので、実際の現場に足を運んでみました。 そして、館内をぐるっと見学してみて、大体の施設の配置を把握してきました。（ちなみに、ビルの中をウロウロしてると普通に不審者だと思うので、警備員の方
HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル:phpspot開発日誌
Create a page flip effect with HTML5 canvas | Tutorial | .net magazine HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル。 canvasなんかも活用しつつ次のようにリアルに実現できちゃってます。Chromeなんかでは超なめらかでした。 Flashじゃなくてもできちゃうんですね。 ライブデモ 実装のためのコードがチュートリアル形式で解説されていますが、このテクニックは色々と使えそうですね。 関連エントリ CSS3を使った驚きのデモいろいろ２５種類 画面をスワイプさせてページ送りができるWordPressプラグイン「iPad Swipe」 iPadのブラウザ上で電子書籍風のめくる操作を可能にするJavaScript
細部にこだわったUIエレメントをPhotoshopで作成するポイント
ウェブデザインをワンランクアップさせる、リアリスティックなユーザインターフェイスエレメントをPhotoshopで作成するポイントを紹介します。 Crafting Subtle & Realistic User Interfaces [ad#ad-2] 少し古い記事ですが、現在でも役立つ情報なのでご紹介。 下記は各ポイントを意訳したものです。 オブジェクトを想像する 光沢 vs つや消し 制作に役立つTips リアリティは繊細に オブジェクトを想像する リアリスティックなUIエレメントを設計する時には、そのオブジェクトが実世界でどのように見えるか想像する必要があります。それを実現する一番簡単な方法は、そのオブジェクトをモニターの横からどのように見えるか想像することです。 これは最近のウェブデザインでもよく見かける微妙な凸型のパネルで、その外周には小さいエッジを持っています。光源は上部にあり、
「えきねっと」の衝撃！ 最悪のユーザビリティーを放置するＪＲ東日本の体質 : 筆Blog
Penです。 数年ほど前に、えきねっとに起因するトラブルで、JRから1万円ほどだまし取られました。 新横浜発の新幹線のチケットを「えきねっと」を利用して購入しました。 当日の朝、出発の30分ほど前に横浜駅に到着したのですが、肝心のチケットの受け取り場所（キオスク端末）がみつからず、JR東海の窓口に並んで確認をこころみるも、長蛇の列で30分を空費したあげく、発車時間になったためとりあえず乗車券を購入して､新幹線に飛び乗りました。 （横浜駅新横浜駅はＪＲ東海の縄張りらしく、ＪＲ東日本の端末はよくわからない場所にひっそりと設置されています） とりあえず目的地で下車したのちに、窓口で事情を話したところ、ＪＲ東海の職員はＪＲ東日本が運営する「えきねっと」のことはわからないらしく、5分くらいマニュアルと格闘したのちに「えきねっとのチケットは発券していないので、クレジットカードに請求されません。」と断言
カッコいい円形のメニューナビゲーション実装jQueryプラグイン「Flower Navigation」:phpspot開発日誌
カッコいい円形のメニューナビゲーション実装jQueryプラグイン「Flower Navigation」 2011年03月31日- jQuery Flower Navigation | jQuery Plugins カッコいい円形のメニューナビゲーション実装jQueryプラグイン「Flower Navigation」。 何の変哲もない円形のボタン。 クリックすると円の内側から画像がワサッとアニメーションでメニューが現れます。 カーソルを合わせると止まります。 マークアップは次のように書かれています。 デモではクリックしても飛べませんが、aタグのhrefを指定してあげれば飛べるということが分かりますね。 <nav id="websites"> <ul> <li><a href="#"><img src="http://soma.urlich.ch/_media/internet/mdm_sma
HTML5+CSS3で実装された、さまざまなUIエレメントのコレクション
パラグラフ・リスト・見出しなど [ad#ad-2] UIパーツの使い方 下記の3つのステップで、これらのUIを自分のページで利用できます。 IEへの対応 IEにHTML5を理解させるために、2つの重要なファイルを使用します。 <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <link rel="stylesheet" href="ie.css" type="text/css" /> <![endif]--> CSSのインクルード スタイルシートファイルをインクルードしてください。もし使用するエレメントが限られているのであれば、その箇所のみで大丈夫です。 <link rel="stylesheet" href="reset.css"
ヘッダーやナビゲーション等、Webデザインをパーツ別に収集しているギャラリーサイトまとめ - かちびと.net
いくつか知っておいた方が、必要な時に 探しやすいと思ってメモします。Webサイト のデザインをヘッダーやフッターなど、 パーツ別に収集しているギャラリーサイトが いくつかあるのでまとめます。 そんな大量に有るわけではないですけど。パーツのデザインはいつも迷うのでこの手のギャラリーはいくつあっても結構重宝しますよね。 ブブンデザインアーカイブ 国内でおそらく唯一のパーツ別デザインギャラリーです。ナビゲーションやフッターなどで探せて、収集しているサイトも国内メインなので参考になるのでは。 ブブンデザインアーカイブ MephoBox ヘッダーやフッター、ナビゲーションやフォームデザインだけでなく、404やカレンダーなど全てのコンテンツをカテゴリにしてパーツデザインを収集しています。おすすめ。 MephoBox Pattern Tap こちらもナビゲーションやボタン、フォームデザインなどに分けてデ
ユーザーの視線を誘導する３つのユーザビリティ改善方法
webサイトにおけるユーザーの視線は、なかなか見る事が出来ない代物ではあります。 実際に企業や、あなたが作成したwebサービスが、ユーザーに訴えたい事を、ユーザーにきちんと届ける為に、どのような方法があるのかを考えて見ましょう。 １）全ての情報を遮断する 手っ取り早い方法としては、あらゆる情報を遮断する方法があります。 つまりその言いたい事意外の情報をあえて隠蔽するわけです。 実にシンプルな方法です。 ただし、シンプルであるがゆえに非常に難易度が高いです。 なぜなら、配置するテキスト選びは慎重にしなければなりませんし、訴えたい事が多い場合、何をまず訴えるべきかをしっかりと考えて、ユーザーが迷う事なく、そして的確な操作が出来るように誘導して上げる必要があるからです。 １）サービスに対して興味を少しだけ持ってもらう情報を書く ２）サービス開始はちょっと・・・という人のためにクリックしやすいリン
WEBデザインとアプリデザインのためのフリーUIパッケージ「18 free UI elements packs for your web designs and apps」
WEBデザインとアプリデザインのためのフリーUIパッケージ「18 free UI elements packs for your web designs and apps」 インターフェイスを製作するときに時間を節約しながら、クオリティを保ちたいときに、ユーザーインターフェイスに必要なパーツをパッケージした素材が便利です。今日紹介するのはWEBデザインとアプリデザインのためのフリーUIパッケージを集めたエントリー「18 free UI elements packs for your web designs and apps」です。 Modern Web UI Set 様々なタイプのUIの素材が用意されていますが、今日はその中から幾つか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■Mobility: set of mobile UI elements アプリケーショ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
はてなブログ | 無料ブログを作成しよう
新宿案内図問題：新宿エルタワーのサインのデザインがわかりにくい
商用利用も無料、細部まで美しく作り込まれたUIエレメントが揃ったPSD素材 -Vue UI Kit
商用利用も無料、洗練されたデザインのウェブ用UIエレメントのPSD素材 -Design Kindle | コリス
http://e0166nt.com/blog-entry-864.html
ちょっと使ってみたくなるHTML5/CSS3のUIエレメント集 -Boxtuffs