ソシオメディア | iPhone の当たり判定を検証した
スマートフォンやタブレットなどのモバイルデバイス向けにUIをデザインする際には、タッチ操作に適したコントロール表現を追求しなければいけません。 タッチ操作に適したコントロール表現とは、前回書いたジェスチャもありますが、それ以前に、ボタンやリンクなどのUI要素を指で押しやすい大きさにすることが大切です。 パソコン画面のマウスポインターと違って、タッチスクリーンにおいて指でボタンをタップする場合、指がそのボタンを覆い隠してしまうので、意図した場所に正しく触れているのか分かりにくく、またボタン自体の視覚的なフィードバックも確認しづらいという課題があります。 またマウスポインターではピクセルレベルで画面上の座標を指し示すことができますが、指先ではそのような細かい操作はできません。 ですからタッチデバイスでは、ボタンやリンクが細かく密集しているようなデザインは大きなストレスになります。 最低限の大き
Offboarding Mailbox - Mailbox
Login to Dropbox. Bring your photos, docs, and videos anywhere and keep your files safe.
【スマートフォン向け開発】ユーザビリティチェックリストを作ってみた
最近はスマートフォン系の開発から離れてしまっているので、感覚が鈍らないうちに（備忘録も兼ねて）スマートフォン向け開発（主にネイティブアプリ開発）におけるユーザビリティチェックリストを作ってみました。 ちなみに、このチェックリストは以下が前提となっていますのでご了承ください。 ・独自性を生み出すようなものではない ⇒現在のスマートフォンアプリのメインストリームの中で、アプリの印象をより洗練されたものにするためのポイントです。 ・案件の内容に関わらず意識すべきポイント ⇒ある程度汎用性の高いチェックリストになっているとは思います。 それでは、全てベーシックな内容ではありますが、その中でも特に基本的なものから説明していきます。 ※僕がiPhoneユーザーということもありiPhoneの画面イメージばかりが並んでいますが、全てAndroidでも使えるチェック項目です。 小さくし過ぎない、詰め込み過ぎ
細かすぎて伝わりづらい! <br />iOS 5のデザイン変更点まとめ。
iOS 5のリリースやiCloudの開始、iPhone 4Sの発売と、ここ最近のAppleのプロダクトが一通り出そろった感じですね。 3GSを使っていて常々もっさりしていたので、早速iPhone 4Sに乗り換えたところ、画面の中をスケートをしているかのようにスイスイ動いてくれてとても快適です。 2年前に3GSを使っていたときは、なんて速いんだろうと思っていたわけですが…慣れとは恐ろしいものです。 さて本題ですが、ここ数日使っていた中で気付いた、細かすぎるデザイン変更点があったので前回のLionと同じようにまとめてみました。 細かすぎるデザイン変更点第2弾、今回も目を凝らしてどうぞ。 1.アイコンバッジ iOS 4のアイコンバッジのシャドウは濃いめのブラックで強めのシャドウになっていましたが、iOS 5ではグレーっぽく明るくなっています。 全体的に比較してみると、iOS 4のシャドウは浮いて
fladdict » スマホのUI考 〜 ボタンについて
SuperPopCamとか作ったときに、体系的な資料欲しいなぁーとか思ってたことのまとめ。 色々と自分の中の考えをまとめるためのメモ。世の中のアプリは機能を半分にして、減った予算分をUIの練り込みにつぎ込んだ方が絶対よいアプリになると思う。 書いてる作業が一番考えまとまるので、ちょぼちょぼあげていこうかと、まずはボタンから。 指の大きさの制約を受ける ・Webとスマホを比較した場合、最大の違い。 ・ピクセル単位でクリック位置を制御できるマウスポインタと違い、指は大雑把にしかタップ位置を指定できない。 ・このためAppleはボタンの最小サイズとして44pxというガイドラインを作っている。 ・視覚的に44px以下のボタンも実際のヒットエリアは大きめにする。 ・またこれに留まらず、ボタンとボタンの間のマージンは空けられるだけ空けた方が安全。 ・つまるところ「カッチリ」つめたボタンレイアウトのグラ
ITmedia ライフスタイル：デザインで性能が変わる〜Suica改札機のわずかな傾き (1/2)
8月16日まで、東京の松屋銀座7階のデザインギャラリーで、「デザインによる解決―Suica改札機のわずかな傾き」という展覧会が開催されている（入場無料）。 ある日、家に帰ってみたらこの展覧会の案内ハガキが来ていた。あれ、なんでSuicaのが家に来たんだろう。“ペンギンマニア”（*1）なのがばれたかな、と思ってよく読んでみると、Suicaの改札機のデザインはリーディング・エッジ・デザインの山中俊治さんが関っていたのだと書いてある。 山中さんにはMorph3やハルキゲニア01の取材などでお会いしているので、案内状をくださったのだろう。何にしても、面白そうな匂いがする。アップルストアに取材に行った帰りに寄ってみた（*2）。 これが大当たり。 最初に断っておくけど、会場は狭い。展示は本当にワンテーマ。普通の人だと3分で見終ってしまう。興味のある人で20分。だから、これだけのために出かけてとまでは、
Webユーザインターフェースの "暗黙知" を意識していますか？ : LINE Corporation ディレクターブログ
暗黙知（あんもくち、Tacit Knowing）は、ハンガリーの哲学者・社会学者マイケル・ポランニー（Michael Polanyi) によって1966 年に提示された概念で、認知のプロセス、或は、言葉に表せる知覚に対して、（全体的・部分的に）言葉に表せない・説明できない知覚を指す。Wikipediaより こんにちは。livedoorで検索全般を担当しております、須田です。 タイトルのままなのですが、少しづつ日本のWEBにおける暗黙知を共有したいと思っています。 暗黙知の共有することで得られるメリットですが、 ユーザーにとっては、分かりづらいUIを日本からできるだけ無くすことができ、斬新なUIに慣れるという煩わしい時間からの開放企業にとっては、暗黙知として決まりがあることで、UIを検討する時間の短縮にもなるというメリットがあると思います。 まずは誰でも知っていると思われる基本的なところだけ
山中俊治の「デザインの骨格」 » iPhoneを使いこなす赤子
骨展忘年会の土佐さんによるオタマトーン演奏もすごかったですが、もう一つ地味にすごい光景を見てしまいました。 参加者の一人がつれてきた一歳半のお子さんが、ふと父親のiphoneに手を伸ばしたのです。まだほとんど意味のある言葉も話せないのに、左手でそれを持ち、右手の人差し指でキーをスライドさせて、こともなげにロックを解除させました。唖然として見ていると、そのままアプリ一覧をスクロールして、ipodアプリを立ち上げ、自分が映っているビデオや、家族の写真を拾いだしてきて、こちらを見てにっこり。 画面の３分の一ほどしかない小さな指が、右に左に写真をスルーする様は圧巻です。それに飽きると、別なメディアアート系のアプリを立ち上げて、父親に見せたりもしていました。 特に教わる事もなく、見よう見まねで触っているうちに使いこなしたのだとか。他のケータイは使えないそうです。 少し前に、工学部の学生と、アップルは
やっぱり[OK]ボタンは右なんだよ - ぼくはまちちゃん！
こんな話題はいまさらかもしれない！ それはわかってます！ だけど書きたい！ なにって、[OK]ボタンの位置のことです！ これって右に置くのが自然だよ絶対！！ 理由は単純で、 [OK][キャンセル] は、画面によっては [保存] [取り消し] だとかに名前を変えるし、 さらに、入力が3ページあるようなウィザード形式の画面なんかだと、 [ここまでOKそして次の画面へ]、[間違ったかもしれないから前へ戻って修正] とかになっちゃう。 うん、このウィザード形式の時のことを考えるとわかりやすい！ ウェブは横書き！ 左から右に読む！ 左からやってきたんだから、[戻る] のは左！ 右に進んでいくんだから、[進む] のは右！ だから、[次へ] も [保存] も [OK] も右が自然！ ウィザードっぽい画面の時と他の画面の時とで 「OK的なもの」の位置がぶれていると、少し迷うよね。 だから[OK]は右に統一
![やっぱり[OK]ボタンは右なんだよ - ぼくはまちちゃん！](https://cdn-ak-scissors.b.st-hatena.com/image/square/281b1fd51f0e3fedc726435362724c3af4fce817/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F13208692334729888519%2F26003855888873578%2F1550052661)
機能やボタンが多すぎ!! 使いにくいUIのデジタル家電が発売されてしまう本当の理由 - キャズムを超えろ！
一昨日メディアの方とランチしながらふと話題になったのが「今の家電メーカー製デジタル家電って機能ありすぎてわかんないよね」という話で、先に書いたRSSリーダーの話にも通じる。 まったくもってその通りなんだが、じゃぁ「なぜ・どうしてそうなっちゃったの？」を紐解くと、わりとシュールな要因が浮かんでくる。 ズバリ言ってしまうと既存機能に上乗せする企画は通すのが簡単だし、リスクが少ないからだ。多少使いにくくてもそれが売れない決定的理由にはなりづらいことから、(売れなかったときの)責任を問われる立案者・決裁者ともに「多少複雑になってもかまわず機能を上積みしていくこと」は保身のためを考えるとリスクが少ない手法というわけだ。逆に削ることは、安定した大企業の会社員としてはものすごい勇気がいる。下手すりゃ前モデルで20%あったシェアが5%とかに落ちてしまう可能性も高いわけで、そんな企画を立案した者(担当者)・
ユーザーの動き。｜CSS HappyLife
ボクたちみたいな、ウェブサイトを閲覧するのが当たり前の人間からすると、全く気づかない事に気づかされたりしたので、自分用メモ。 2008年2月14日の22：47頃に追記 ボクのただのメモ書きをもうちょっとちゃんと以下のエントリーで書いてもらってるので、あわせてご覧になって頂くと、良いかと思います。 Webアクセシビリティについての覚書 - ねんがんのWebユーザビリティテストに参加した ロゴクリック＝トップページに戻るという認識は殆ど無い。 トップページに戻る場合は、ブラウザの「戻る」ボタン。 サイドバーのバナーは、認知すらされない傾向が強い。 そもそもバナーとして押せるものではなく、デザイン上の飾りとして見られる場合も。 リストのマークとかのマーク部分をクリックしよーとする人が居る。 それにより、クリックできないと諦めるケースも。 プルダウン（ドロップダウン）型メニューは、近くのボタンを押
UI-patterns.com
User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer. Product Insights at your fingertips. Our confidence-boosting product tools for business growth are practical guides and strategies that will immediately amplify the expertise of you and your team.
メニューとショートカット
メニュー選択方法に表れる二大OSの設計思想 Macのメニューバーにあるメニューは、「プルダウンメニュー」と呼ばれ、ドラッグ操作が基本。対してWindowsのメニューは、「ドロップダウン」メニューと呼ばれ、始点と終点で二度クリックする操作となる。 大差がないかもしれないが、メニュー選択のためにボタンを押す回数はMacのほうが1回少ない。2回が1回で済むのだから半分ということになり、積もり積もれば大きな差だ。なお現在は両OSとも、プルダウン的、ドロップダウン的な操作もできる。しかし、アイコンなどの上で開くメニューの場合には操作方法に依然違いがある。 Macは元来1ボタンマウスで、「コンテクストメニュー」を開くには「control」キーを押しながらボタンを押す。Windowsは2ボタン以上が標準で、「コンテキストメニュー」は右ボタンのクリックで開く。ところがMacも、現在では右ボタンの存在を前提
Mac vs Win【GUIの基礎と実践】第1回 デスクトップとウィンドウ
メニューバーに象徴される操作性の根本的な違い MacとWindowsのユーザーインターフェースは、似ているようで似ていない。あるいは逆に似ていないようで似ている、という共通点と相違点が入り交じった微妙な関係だ。どちらも、アイコン、ウィンドウ、メニューなどを、基本的にマウスを使って操作するという大原則はもちろん共通だが、インターフェースを構成する個々のパーツの操作方法や配置にも違いがあるのだ。 最もはっきりした違いは、メニューバーの位置にある。Macの場合はどんなソフトでも一貫してデスクトップの上辺にあるメニューバーを使うが、Windowsの場合には個々のソフトのメインウィンドウの上辺にメニューバーが用意されている。 各ウィンドウの上辺（タイトルバー）に、そのウィンドウを操作するボタン類が並んでいる、という点は共通だが、その配置はMacは左寄り、Windowsは右寄りと見事に真逆だ。Wind
ウノウラボ Unoh Labs: フォームのユーザビリティを改善する10のTips
miyakeです。Webアプリケーションにおけるユーザーインタフェースの代表格と言えばフォーム。今日はそんなフォームのUIを作るに当たって、普段自分が心掛けていることをつらつらとご紹介します。 ■チェックボックスやラジオボタンはfieldset,label要素でくくる チェックボックスやラジオボタンには一般的にその内容を表すテキスト（ラベル）が付けられますが、input要素だけでマークアップした場合、チェックボックス（ラジオボタン）の部分しかクリックすることができません。 label要素を用いることで、ラベルの部分をクリックしてフォームを操作することが可能になります。これは是非設定しておきましょう。 ラベルをクリックできると思って期待を裏切られると、かなりのストレスになりかねません。 また、そのチェックボックスやラジオボタンのグループをfieldset要素で囲んでおくことをお勧めします。マ
最近買ったガジェットのレビュー:江島健太郎 / Kenn's Clairvoyance - CNET Japan
先日、クレジットカードの請求書を整理していて、自分のなかにある傾向を見つけました。 それは、「仕事がうまくいってない時期ほどたくさん買い物をする」ということです。 たぶん、いろいろもがくんでしょうね。無理矢理リラックスしようとスパへ行ったり、本を大量にまとめ買いして乱読してヒントを得ようとしたり、今までに行ったことのないレストランへ行ってみようとか、なんとなく見る機会を逃していたDVDを見ようとか、気分転換に出かけようとか、おれの生産性が低いのはこのトロいマシンのせいだ、そうだそうに決まっているもっといいマシンが欲しいぞコノヤロと八つ当たりついでに物欲に走ったり。 悶々とする渦中にあっても、なにか有意義なことに自分の時間をつかっている、日々あたらしい体験をしている、という実感を求めているのでしょう。そしてそのためにお金の力を借りる。 逆に仕事の調子がいいときには、お金をつかう時間がないとか
［WSJ］ 「ボタンを消せ」――Appleのジョブズ氏が追求する命題 - ITmedia News
Expired：掲載期限切れです この記事は，ダウ・ジョーンズ・ジャパンとの契約の掲載期限（90日間）を過ぎましたので本サーバから削除しました。 このページは20秒後にNews トップページに自動的に切り替わります。
ABlog 対話できるUI、話を聞かないUI
一日アドエス（という略称が一番定着しているのかな？）を使ってみました。初代W-Zero3からずっと使っているので、だいたいの操作は理解できるのですが、評価するからにはもう少し使い慣れないと、と思い、風呂にも持ち込み、寝る時も枕元に置いて、とりあえずいろいろ使ってみました。 僕はiPhoneも持っているので、どうしてもiPhoneとの比較になってしまう部分もあり、インターフェイスに関しては不満が消せません。ほとんどはWM6のあまりの完成度の低さが原因ですが、一部アドエス本体の問題もあります。 ハードウェアの問題としては、やはりスタイラスを収納できない、というのがあります。付属のクリップみたいなスタイラスもどきは、正直常用に耐えないし、あれで操作する事を前提にアドエスの操作感を評価するなら点数は絶望的に低いです。キーボードとエクスクロールだけで操作できるのかとも思ったのですが、一日使ってとても
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【レビュー】iPhone使用レビュー「Webアプリ編」 - 暗中模索からiPhoneアプリへの3週間 (5) iPhoneのUIに結びつくWebサービス | 携帯 | マイコミジャーナル
http://local.joelonsoftware.com/mediawiki/index.php/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E3%83%A6%E3%83%BC%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%95%E3%82%A7%E3%83%BC%E3%82%B9%E3%83%87%E3%82%B6%E3%82%A4%E3%258