やってはいけないUIアニメーション
ここの画面ではメインボタンの「START」を目立たせたいのですが、右上のボタンに目がいってしまいます。 右上に目がいってしまうのは、最後に動く箇所に視線が移動するので不必要に右上に視線が誘導されます。 他にもコントラストや動き量がメインボタンよりも大きく変化しているため、いやでも目についてしまいます。 不必要に待たせている 最後に動かすところに視線が行きますが、視線をメインボタンに向けさせようと最後のアニメーションを長くしてしまった結果、ユーザーがアニメーションによって待たされている状態になってしまいました。 メインボタンはすぐに押してゲームを遊べることが大切になるので、最後にボタンを大きく動かして目立たせてもユーザーは早く押させて欲しいと思ってしまうので、アニメーションは短くサッと出して上げてユーザーが気持ちよく行動できるといいですね。 動き過ぎ、優先順位が曖昧 全てが動き過ぎてしまい、
話題のCASHというアプリのUIデザインがめちゃよくできてる
最近メルカリとDMMのファイトがスタートして盛り上がっている即時キャッシュ化サービスですが、元祖のCASHというアプリのUIデザインがめちゃくちゃ良くできてる。ちなみにiOSアプリしか見てないけど、iOSアプリを作ってる人はとりあえずダウンロードしてみる価値あると思う。 世の中にはいろんなiOSアプリがあるんだけど、UIデザインがこれすごいわと思うものってやっぱり英語のものが多かったんだけど、日本人としては日本語メインのアプリでよく考えられているものが一番参考になるんですよね。なんといってもテキストはUIで一番多く使われている部分だし。 アプリって基本的に何度も考えて考えないとゴッチャゴッチャとボタンが増えていって、結果的になんだかスッキリしない使いづらいアプリが出来上がるんだけど、CASHのアプリはすごく良くできてる。なんというか、無駄を削ぎ落としている。 まず、デザインの色の使い分けが
小さい子どもにコンピュータを触らせるということ - ビスケットのあれこれ
ビスケットは，開発して新しい機能を追加したときなど，必ず子どもたちが使っている様子を自分目で見てどんな風に使っているかを見てきます（最近はその暇が無くて他人に任せていたりして，かなりまずいんですが）．3年前くらいの面白いエピソードをご紹介しましょう． ちょうど，Androidタブレットで動くビスケットを開発していて（これはまた一般には配布していません．実験環境だけです），それがどのように子どもたちに使われるか見に行きました．僕としても指で直接操作するタブレットのUIの開発は初めてで．実は，マウスとタッチペンの操作は結構似ています．どちらも，非常に小さいエリアを結構正確にポイントできて，ドラッグもできますから．どちらかというと，ペンの方がドラッグが得意でしたね．小さい子はマウスクリックが全然出来ないとか（ボタンを押すときに指先だけ押すということができないので，手を握ってしまって，その結果マウ
hueからの意識改革 : 続・ユビキタスの街角
ネットから制御可能な hue というLED電球が面白い。 iPhoneやAndroidのアプリから明るさをコントロールできるうえに、 公開APIを使えばパソコンからネット経由で自由に制御することができる。 ネットから制御できる電球はいろいろ提案されているのだが、 今すぐ買ってすぐ便利に使えるところがありがたい。 赤外線リモコンを使ってワイヤレスに制御できる電灯は現在普通に売られているし、 ネットから制御できたら何が面白いの? と思う人もいるかもしれないが、 ネット経由で自由に制御可能な製品が増えることによって 日常的な機器の操作インタフェースに関する意識が変わっていくことを期待したいと思っている。 現在の家庭やオフィスの電灯は部屋の入口付近のスイッチでコントロールするのが普通であり、 電灯が複数ある場合は複数のスイッチが並んでいるものである。 このため、部屋の明るさを変えるためにわざわざ部
Mac OS X Lion：これは僕らが期待した未来じゃない
こんなこと書くのは胸が張り裂けそうだけどMac OSX Lionのインターフェイス、ダメっぽいですよ。OSをシンプルにして、iOSのクリーンなエクスペリエンスと統一するというミッションはどこへやら。 グラフィックスとネットワーキングの基幹が高速で磐石なUnixじゃなかったらLionはアップルのVistaになるところですよ。 よりシンプルな未来...になっていない Lion初公開のときスティーブ・ジョブズはiPadとiPhoneの成功要因をデスクトップに採り入れるのがLionのゴールだと明確に示しました。悪いことじゃないですよね。操作が簡単になればユーザーもコンピュータの操作にてんてこ舞いすることなく、やりたい作業に集中できますから。コンピュータ・エクスペリエンスの簡略化は'80年代からずっとコンピュータの聖杯とされてきたことでもあります。 コマンドラインからグラフィカルデスクトップに移行し
スマホUI考3 ～ ジェスチャ入力について | fladdict
スマホUI考１ 〜 ボタンについて スマホUI考２ 〜 フィードバックについて スマホといえばジェスチャー入力、ジェスチャーといえばスマホ。そんなジェスチャーについて、つれづれと。 でも個人的には、ジェスチャーはほとんど要らないと思う。 ジェスチャ全般 ・ジェスチャは補助操作。メイン操作ではない。 ・ボタンでできる操作をプラスアルファで、ジェスチャでもできるようにする。 ・なぜならジェスチャの有無は視覚的にわからない。 ・ユーザーがジェスチャを理解しなくても操作できるのがよい。 ・またジェスチャー時に、画面のかなりの部分が指で隠れる。 ・極論ジェスチャなしでもアプリがリリースできる状態なのがよい。 ・つまり予算や工数があまったときに入れよう。 タップ ・マウスクリックではなくタップ。 ・ボタンの精度は指のサイズに依存する。 ・細かい座標指定はできない。 ・ロールオーバーがない。 ・触ってみ
置くだけでは不十分？ヘルプ活用3つのポイント (ユーザビリティ実践メモ)
FAQやよくある質問などのヘルプコンテンツは、ユーザの疑問や不安を解消するために、どこのサイトでも必ずと言っていいほど設置されています。 今回から数回にわたって、「FAQ・ヘルプ」をテーマにした記事をお届けする予定ですが、まず今回は、ヘルプ活用の基本ともいうべき3つのポイントについてご紹介します。 一点目は、以前の実践メモ（「FAQの隠れた役割」）でも触れていますが、「よくある質問」や「FAQ」というリンクを置くだけでなく、本文の中で、ユーザの疑問が生じるところからヘルプに誘導する」ということです。 サイトを閲覧しているユーザは、「商品やサービスを選び、購入する」といった何かしらの目的を持って動いていることが多く、「ヘルプを閲覧しに行く」といった脇道へ逸れる行動には移りにくい状態です。 そこで、図2のように、ユーザが疑問や不安を感じるポイントで、ユーザの疑問・不安に合わせた表現を用いたリン
らくらくホンとの連携強化でヒットを狙う! “引き算”で作った「らくらくパソコン3」 - 日経トレンディネット
次々と登場する新製品、新施設のなかから、“次のヒット”が狙えそうなものを厳選。開発担当者にその背景やターゲット、戦略などを聞き、編集部が独自にヒット度を予測する。第5回は、富士通のシニア向けパソコン「らくらくパソコン3」だ。 パーソナルビジネス本部 第二PC事業部 ソフトウェア技術部 プロジェクト部長の大平竜弘氏。らくらくパソコンのソフトウエアを担当した（画像クリックで拡大） 富士通のシニア向け携帯電話「らくらくホン」は、累計1800万台（2010年7月時点）を出荷している人気機種だ。最新の「らくらくホン7」は、元マラソン選手の高橋尚子氏がウォーキングフォームを診断してくれる「高橋尚子のウォーキングクリニック」などを盛り込み、健康支援機能の充実を図った。 富士通によると国内の60歳以上の携帯電話所有者数は約1850万人。らくらくホンは現在、約900万台が稼働しており、約半分の人がらくらくホ
WEBデザイナー向け☆iPhoneアプリのUIデザイン
どーもキンモクセイぷんぷん香る自由が丘からaoizmです。 秋満開！スマートフォンまっさかり！(強引) KAYACでもiphoneアプリ制作のお仕事が増えてきております。 WEBデザイナーがiphoneアプリのデザインをする際に、やっぱり気になるのがWEBとの違い。 画面サイズが小さく持ち歩けるデバイスiphoneは、デスクトップ上のアプリやWEBサイトとは 使用環境もその操作方法も異なるため、WEBとは違ったインターフェイスが求められます。 その違いを認識した上で、違いを活かしたデザインをするためには？ iPhoneアプリのUIデザインまとめてみました。 WEBサイトとiphoneアプリの違い 状況 持ち歩けるがゆえそのシチュエーションもさまざま 「会議で」「合コンで」「移動時」「就寝時」... 状態 そのときユーザーはなにをしている？ 「歩きながら」「話しながら」「運動しながら」...
iPhoneゲーム「かなぶん」のデザインについて | つくる社LLC
つくる社のまえだ（@monoooki）です。今回はiPhoneゲームかなぶんのデザインリニューアルについてご紹介します。 担当した作業はアプリのUIデザインでしたが、基本的にいつもやっているWebデザインと同じ要領で進めることができました。コーディングやチェック環境が減った分、気楽に出来たと思います。 旧バージョンの問題点について ゲーム画面に出てくる女の子（かなこちゃん）が、男児ユーザーに不評 海外展開をしたいので、性別、国、年齢を問わないニュートラルな雰囲気にしたい その他、ゲーム画面のあちこちを整えて欲しい 石原さんのお子さんは男兄弟なのですが、ゲーム画面に女の子が出てくるのをあまり好まなかったようです。自分もそうでしたが、小学生くらいの年齢だと女の子の絵の入ったものは気恥ずかしくて、あまり持つことはありませんでした。現状は大きいお友達成分がやや含まれています。 想定しているユーザー
第2回 アクションを起こしてもらえるフォームのポイントは？ | gihyo.jp
使いやすいフォームをデザインする6つのポイント みなさんは、どのようにフォームをデザインしているでしょうか？ CSSでスタイリングされていない素のHTMLフォームは、当然ですがデザイン性にとぼしいものです。また、入力エリアが狭いため、ユーザビリティも高いとは言えません。 フォームにはお問い合わせフォーム、申し込みフォーム、予約フォームなどいろいろありますが、共通するのは「ユーザーにアクションを起こしてもらう重要な要素である」ということです。しかし、フォームへの入力は、ユーザーにとって面倒な作業です。そのため、極力簡単に入力できるようにして、ユーザーの負荷を軽減する必要があります。 それでは、どうすればユーザーの負荷を軽減させることができるでしょうか？ そのためのポイントが以下の6つです。 要素を整列させる 適度な余白をつくる ディテールを作り込む デザインされたボタンを使う 住所を自動入力
iPhoneユーザが目の色を変えるAndroidの機能紹介(1) - インテント
■ iPhoneユーザが目の色を変えるAndroidの機能紹介(1) - インテント あ、なんか釣りっぽいタイトルになってしまった(笑)。 いやね、行く先々で「たださん、Androidどうですか」って聞かれるんだけど、けっこうみんな、Androidのこと知らないんだよ。GoogleがAppleに対抗して作ったiPhoneOSの真似っこにすぎなくて、たいして違わないと思い込んでる(白状すると、おれもそう思っていた)。で、iPhoneとの違いを重点的に説明してあげると、「わー、いいなー」っていう反応がかなり返ってくるんだな*1。 というわけで、(だんだん個別に説明するのが面倒になってきたので)ウケのいい機能をいくつかピックアップしてみようと思う。まずはマルチタスクOSの面目躍如、アプリケーション間連携機能「インテント」について。 iPhoneで撮った写真をメールで送るという場面を考えてみる。i
AXISフォーラム「MITメディアラボ 副所長・教授 石井 裕氏 講演会」レポート その1
2010.04.09 AXISフォーラム「MITメディアラボ 副所長・教授 石井 裕氏 講演会」レポート その1 去る1月15日に開催したアクシスフォーラム「MITメディアラボ 副所長・教授 石井 裕氏 講演会」の模様を4週にわたって動画でお届けします。 テーマは「永訣の朝・身体の痕跡・ポストタンジブルビット」。まずは石井教授が若き頃に感銘を受けた宮沢賢治の詩「永訣の朝」を起点に、「私は喋るスピードがどんどん早くなります」とおっしゃるように、話は徐々に熱を帯びてきます。 そして、「ミュージック・ボトルズ」をはじめとするさまざまな作品を振り返りながら……。 突然、北斎の『冨嶽三十六景 神奈川沖浪裏』が飛び出す……。 次週につづきます！ 石井 裕／1956年東京生まれ、札幌育ち。北海道新聞社のコンピュータプログラマーだった父の影響で幼少期からコンピュータに興味を持つ。80年北海道大学大学院情報
1991年の資料から学ぶ情報デザインチェックリスト
Web デザインをきっかけに知ることになった方も多いと思いますが、IA (Information Architecture) の歴史は長く 30,40 年ほど遡ることが出来ます。IA と明確に書かれていない書籍でも IA に関わる資料が昔からたくさんあるわけですが、当時はどのようなことが書かれていたのでしょうか。今と変わらないもの、そして今とは違う事柄はあるのでしょうか。Volkside の「17 guidelines for better information architecture…from 1991」という記事で Kent L. Norman が執筆した「The Psychology of Menu Selection: Designing Cognitive Control at the Human/Computer Interface」という書籍が紹介されています。 1991
pukiwiki、はてなトップページの妙な恐怖感
尾野（しっぽ） @tail_y 先週のことだけど、会社にいる女の人がtwitterクライアントを入れるという話になった時にググってこのページを見せたのだけど、後々、このサイトが「怖かった」という話を聞いた。普通のpukiwikiページ。 http://bit.ly/HdaHR 2010-03-08 11:49:50 нσυѕαι тσяυ／縫采 徹 @firty_housai 何があった…RT @tail_y: 先週のことだけど、会社にいる女の人がtwitterクライアントを入れるという話になった時にググってこのページを見せたのだけど、後々、このサイトが「怖かった」という話を聞いた。普通のpukiwikiページ。 http://bit.ly/HdaHR 2010-03-08 11:50:38
認知科学ワークショプ「認知科学とデザイン」【その仕事、蠍は留守です】
認知科学ワークショプ「認知科学とデザイン」 こんにちは、多摩美コンプレックスのHitoyamです。多摩美とかなんかカッコよくない？ 日本ウェブ協会が主催する認知科学ワークショプ「認知科学とデザイン」に参加してきました。講師は多摩美術大学の吉橋昭夫先生が担当されました。 認知科学についての講義 前半は認知科学についての講義を座学で行いました。 参考図書はドナルド・A.ノーマンの『誰のためのデザイン？―認知科学者のデザイン原論 (新曜社認知科学選書)』。その他のノーマンの著作として『エモーショナル・デザイン―微笑を誘うモノたちのために』も紹介されました。ここは両方あわせて読んでおきたいですよね。もちろん両方とも持ってますっ。 キーワード 可視性：やるべきこと、やったこと、やった結果 対応づけ 概念モデル、メンタルモデル：人間が実世界で何かがどのように作用するかを思考する際のプロセス アフォーダ
case:MobileDesign! モバイルサイトのデザイン紹介ブログ
case:MobileDesign! モバイルサイトのデザイン紹介ブログ 引っ越ししました。 http://case-mobile-design.com/ case:MobileDesign! モバイルサイトのデザイン紹介ブログ > 2010-01-22 >
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.stack-style.org/2007-08-16-03/Soren%20Johnson%E3%81%AE%E8%AA%9E%E3%82%8B%E3%80%8C%E3%82%B2%E3%83%BC%E3%83%A0%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%99%82%E3%81%AB%E3%81%99%E3%81%B9%E3%81%8D%E3%81%A7%E3%81%AA%E3%81%848%E3%81%A4%E3%81%AE%E6%82
axiv.com
puyopix TextField
