タグ

UIに関するHamukoroのブックマーク (21)

  • 初代iPhoneのUI設計は困難を極めた

    Appleで約22年間ヒューマンインタフェースを中心としたデザインディレクターを務めたイムラン・チョードリ氏は、自身の倫理観とAppleの意思決定とは必ずしも一致していなかったと考えている。チョードリ氏の話を聞いたFast Companyがそう伝えている。 チョードリ氏は、初代iPhoneにおける最初の開発メンバー6人のうちの1人で、プロトタイプ開発の初期段階で「着信拒否」にどう応答すべきかを考えていた。 iPhoneへの機能制限に関するコントロールレベルについては、スティーブ・ジョブズCEOは内心理解していたと思うが、マーケティング部門から受け入れられないと差し戻されることもあり、非常に困難を極めたという。 大企業における製品設計は複雑な性質を持っていて、会社の利益、顧客へのサービスを倫理的に成立させ、企業として設計することは当に複雑なことなのだと語った。 チョードリ氏は「それらをユー

    初代iPhoneのUI設計は困難を極めた
  • 人はなぜ「分かりやすいデザイン」でも失敗するのか|Tsutomu Sogitani

    これは私が最近よく訪問する日橋駅直結の商業ビル、東京日橋ビル内のエレベーターのボタンです。 唐突に質問ですが、このボタンで操作ミスを起こすポイントがあるとすれば、それがどこだか分かりますか? 説明が必要と思いますが、このビルは7Fがオフィスロビーになっています。駅直結のB1と1Fからは7Fまで直通するシャトルエレベーターがあり、全員7Fで一度降り、セキュリティチェックをし、23Fより上にあるオフィスフロアに入ります。そのオフィスロビーとオフィスフロアを行き来するためのエレベーターのボタンがこれです。 ボタンが23Fから30Fまでしかなくて、下に大きく7Fのボタンがあるのは、そういったビルの構造からです。 私と同行したディレクター(26歳)は、打ち合わせが終わってオフィスフロアからオフィスロビーに帰る際に、操作ミスをしました。それも1度だけでありません。次の打ち合わせの帰りにもまったく同

    人はなぜ「分かりやすいデザイン」でも失敗するのか|Tsutomu Sogitani
    Hamukoro
    Hamukoro 2018/05/22
  • スプラトゥーン、みまもりSwitchなど任天堂のUI/UXデザイナーさんによる「“娯楽”を追求するUIデザイナーの仕事とは」 #uicrunch

    リンク connpass UI Crunch #13 娯楽のUI - by Nintendo - (2018/04/27 19:00〜) ## “娯楽”を追求する、UIデザイナーの仕事とは 私たちは日々、実用品と娯楽品に囲まれて生活しています。どちらも生活に大切なもの。 今回は"もっと便利に"を追求するのではなく、"もっと楽しく"を追求する、UIデザイナー3名を任天堂からお迎えし、「Splatoon」 や「Nintendo みまもり Switch」 などの事例を交えながらお話いただきます。 子どもから大人まで楽しめる娯楽の裏側には、どのような想いや工夫があるのか。 みなさんと一緒に学べる機会になればと思います。 また、後 59 users 1621 UI Crunch @ui_crunch 「娯楽のUI」、開場しました!19:30より、任天堂さんのUI/UXデザイナーさんにご登壇いただきま

    スプラトゥーン、みまもりSwitchなど任天堂のUI/UXデザイナーさんによる「“娯楽”を追求するUIデザイナーの仕事とは」 #uicrunch
    Hamukoro
    Hamukoro 2018/05/02
  • 冷静に考えると券売機が「どこ行きたいの?」じゃなくて「お前いくら出せんの?」という聞き方をしてくるのはおかしくね?

    亜方透🎵12/25フットバ駅15・冬コミ木曜西く30b @AKT_TR たまに券売機で切符買うことあるんだけど、「どこに行きたいの?」じゃなくて「お前いくら出せんの?」って選ばせ方してくるの、冷静に考えるとおかしいよな。なんで目の前にハイテクなタッチパネルがあるのに一回上の路線図見て「えっと○○駅までは…○○円か」ってやらなきゃならないんだよ。 pic.twitter.com/KbnSFirv3G 2017-10-22 22:50:39

    冷静に考えると券売機が「どこ行きたいの?」じゃなくて「お前いくら出せんの?」という聞き方をしてくるのはおかしくね?
    Hamukoro
    Hamukoro 2017/10/24
    そういえば地元のローカル線はタッチパネルではないのだが駅名表記だな。ずっとそれが当たり前だと思っていたので都会の券売機には面食らった。
  • ドロップダウン:デザインガイドライン

    ドロップダウンボックスやドロップダウンメニューは、使われすぎで見た目も無骨だが、選択肢やコマンドの一覧を示すには有用である。 Dropdowns: Design Guidelines by Angie Li on June 11, 2017 日語版2017年10月3日公開 ドロップダウンのさまざまな利用目的 ドロップダウンが、効果的なWebデザインをおこなう上で一定の役割を担っていることは明らかだ。しかしながら、ドロップダウンが乱用され、誤用されることで、多数のユーザビリティ上の問題や混乱も起きている。デザイナーがドロップダウンを以下のようなさまざまな目的に利用しているからである: コマンドメニュー:選ばれた選択肢にもとづいてアクションを起こす Microsoft Wordでは、ユーザーが「Publish」(:発行)アイコンをクリックすると、ドロップダウンメニューで「Publish」コマ

    ドロップダウン:デザインガイドライン
    Hamukoro
    Hamukoro 2017/10/14
  • メガメニューはサイトナビゲーションに効果あり

    大きな二次元のドロップダウンパネルは、ナビゲーションの選択肢をグループ化することでスクロールの必要性を無くし、タイポグラフィやアイコン、ツールチップを使うことで、ユーザの選択できる内容をわかりやすく提示してくれる。 Mega Menus Work Well for Site Navigation by Jakob Nielsen on March 23, 2009 もうすぐ開催予定のナビゲーションデザインセミナーに向け、我々は様々なナビゲーション機能についてのユーザスタディを実施している。いつものことだが、中にはひどい結果が出てしまった機能もあるし、これまた、いつものことだが、今、流行のようになっている機能(今回の場合はタグクラウド)にはユーザビリティ上の大きな課題が見つかった。 幸いにも、他のウェブトレンドは質的にユーザビリティに優れており、ユーザの行動やゴールによく合っているというこ

    メガメニューはサイトナビゲーションに効果あり
    Hamukoro
    Hamukoro 2017/10/12
    年配のユーザやのんびりしたユーザがマウスをゆっくり動かした結果、彼らがドロップダウンメニュー内の項目をまだ目指している最中に、そのメニュー自体が消えてしまうことがありうる。これは相当にうっとうしい。
  • プログレッシブディスクロージャー

    プログレッシブディスクロージャー(段階的開示)は、高度な機能や使用頻度の低い機能を2段階目の設定画面に譲り、学習容易性の向上とエラーの軽減を図るものである。 Progressive Disclosure by Jakob Nielsen on December 4, 2006 インタラクションデザイナーは次のようなジレンマを抱えている。 ユーザはパワーや機能を求める。自分のニーズをすべて満たしてくれるだけの選択肢が用意されていることを期待する。(そして、ニーズの組み合わせは人それぞれ だ。ワープロに行番号を表示する機能を欲しいと思うユーザは実際には大勢いるし、大手法律事務所のユーザのように特殊なニーズをたくさん抱えているユーザも、もちろんこれを望んでいる。) ユーザは単純さを求める。大量の機能を十分に学習して、自分のニーズにもっとも適したものをその中から選んで使えるようになるまで時間をかけ

    プログレッシブディスクロージャー
    Hamukoro
    Hamukoro 2017/09/30
    印刷
  • iPhone X対応におけるデザイン上の注意ポイント | fladdict

    iPhone Xが発表されたわけですが、なにこのデザイナー泣かせの変態端末。 iPhoneUI設計者グレッグ・クリスティが追い出されて、ジョナサン・アイヴがソフトウェア統括となったのが2014年。 iOS7のフラット化あたりから、どんどんとUI設計が置いてけぼりになった感がありましたが・・・ここにきてまたデザイナー泣かせの豪速球が。 ざっくりデザインガイドラインを読んでの、気になったところメモ。 画面サイズ サイズは従来のベースであった4.7インチの375pt x 667ptから、375 x 812ptに。縦方向に145pt追加された。 想定されるインパクト 表示可能な情報量が増える 縦スクロール系コンテンツのコンバージョンが増加 スクロールで隠れるナビゲーションの必要性が低下 画面上部のボタンのコンバージョンが低下 ゲームなどの全画面イラストに、黒枠が出たり、見切れたりする グラフィッ

    iPhone X対応におけるデザイン上の注意ポイント | fladdict
    Hamukoro
    Hamukoro 2017/09/13
    safariでフルスクリーンにしたらこのツノはどうなるのか。ツノをサポートするHTML5.01はよ。
  • Microsoftは“UI音痴”なのか?

    あれ? UIが変わった? いつものツールはどこ?――Windowsユーザーなら、きっとそんな戸惑いを持ったことがあるはず。そこで、あえて言わせてもらいます。Microsoftの“UI/UX音痴”について。 ちょっと怒っています。Microsoftの“UI/UX音痴”に、です。4月に「Windows 10」の大型アップデートCreators Update)が公開されたのですが、そのときMicrosoftが、また“やらかしてくれた”のです。 メニューの構成が変わり、「コントロールパネル」が見つからなくなったのです。それまでは、スタートボタンを右クリックして表示されるメニューの中にコントロールパネルがあったはずなのですが、「ないな……」と思って調べたところ、この記事を発見して分かったのです。なくなってはいませんでしたが、とても見つけづらいところに移動していました。 どうやらコントロールパネルの

    Microsoftは“UI音痴”なのか?
    Hamukoro
    Hamukoro 2017/08/29
    Officeのリボン好きだけどなぁ
  • Google、モバイル版画像検索にレシピや製品情報を示すバッジを追加

    Android版「Google」アプリとWebブラウザでの画像検索結果のサムネイルに「レシピ」「動画(○分○秒)」などのバッジが表示されるようになる。バッジの付いた画像をタップすると、その場でレシピなどが表示される。 米Googleは8月1日(現地時間)、Android版「Google」アプリとWebブラウザでの画像検索結果に画像情報を示すバッジを追加したと発表した。稿執筆現在、筆者の環境ではまだ再現できないので、ローリングアウトしていくものとみられる。 検索結果の画像サムネイルの左下に、レシピ、商品、動画、GIFアニメのバッジが追加される。例えば「カップケーキ」の検索結果でレシピのバッジが付いている画像をタップすると、画像のカップケーキのレシピがカード状に表示される。

    Google、モバイル版画像検索にレシピや製品情報を示すバッジを追加
  • C#でUIをHTMLで記述する方法(値の埋め込み方)

  • ユーザーのコンピュータスキルの分布: ユーザーのスキルはあなたが思う以上に低い

    先進33か国において、コンピュータ関連の高い能力を持つ人は人口の5%にすぎない。また、中程度の複雑度のタスクを完了することができる人は全体の3分の1しかいない。 The Distribution of Users’ Computer Skills: Worse Than You Think by Jakob Nielsen on November 13, 2016 日語版2017年3月16日公開 身につけるのがもっとも困難なユーザビリティの教訓に、(訳注:デザインプロジェクトに携わっている)「あなた方はユーザーとは違う」というのがある。これこそがユーザーのニーズについての推測が大失敗に終わる理由だ。デザイナーは大半のターゲットオーディンエンスとあまりに異なっているため、いいと思っているものや利用しやすいと思っているものが見当違いになるだけでなく、そうした自分たちの個人的好みによって判断す

    ユーザーのコンピュータスキルの分布: ユーザーのスキルはあなたが思う以上に低い
    Hamukoro
    Hamukoro 2017/04/10
    8%か・・・MSがなぜ拡張子を表示しない設定をデフォにしているのかっていう話だな。
  • ハンバーガーメニューはもう古い!代わりに使えるモバイル用ナビメニュー5つまとめ

    ウェブサイトを制作しているひとなら、モバイル端末におけるハンバーガー型ナビゲーションメニューの見つけにくさと効率の悪さ、またどれだけUXデザインの邪魔になっているのか、いくつもの記事を読んだことがあるでしょう。(この問題の参考にしたい記事はこちらやこちら、こちら、こちらからどうぞ。) 幸いにも多くのサイトやアプリで、より効率的な解決法となる代替アイデアが試されています。今回紹介しているアイデアは、他のものより優れているというわけでなく、コンテンツや内容によってパフォーマンスや実行できるかどうかは変わってきます。 01. タブ型ナビゲーションメニュー もしウェブサイトやアプリの項目が限られている場合、ユーザーはできるだけ素早くそカテゴリを切り替えたいところ。そんなときは、タブ型ナビゲーションが良い解決方法となるでしょう。 タブはもっともシンプルなナビゲーションパターンですが、デザインを制作す

    ハンバーガーメニューはもう古い!代わりに使えるモバイル用ナビメニュー5つまとめ
    Hamukoro
    Hamukoro 2016/11/15
    <frameset>
  • 楽天市場がガチで嫌いな友人に、楽天を使いたくない理由を聞いてみた。なぜ楽天市場のがお得な場合でも、頑なにAmazonを使い続けるのか? - クレジットカードの読みもの

    世の中に一定数存在する「ガチで楽天市場が嫌いな人」たち。 正直、私自身は楽天市場を好んで利用している人間のため、なぜそこまで楽天が嫌いなのかはわからないのですが、楽天が嫌いな人たちは楽天市場のほうがお得であっても頑なにAmazon.co.jpを利用したがる傾向にあります(箇条書きにするなら下記のような感じ)。 Amazonのほうがお得:Amazonで購入 楽天でもAmazonでも同じ価格:Amazonで購入 楽天市場のほうがお得:Amazonで購入 楽天でしか売ってない:諦めて別商品をAmazonで購入 どうしてもその商品しかない:泣く泣く楽天を利用 そこで今回は個人的にも興味があったので、楽天嫌いを公言している知人男性に「なぜ楽天市場を使いたくないのか」を聞いてみました。 すると楽天市場のデメリットとも言える箇所がいくつか見えてきたので、雑談がてらそれらの問題点をまとめてみたいと思います

    楽天市場がガチで嫌いな友人に、楽天を使いたくない理由を聞いてみた。なぜ楽天市場のがお得な場合でも、頑なにAmazonを使い続けるのか? - クレジットカードの読みもの
    Hamukoro
    Hamukoro 2016/06/23
    淀>尼>Y!>楽
  • Tumblr

    Tumblr is a place to express yourself, discover yourself, and bond over the stuff you love. It's where your interests connect you with your people.

    Tumblr
    Hamukoro
    Hamukoro 2013/09/05
    次は六角形のボタンにMatisEBだな。これで日本語が使える。
  • PSコントローラ◯×□△ボタン誕生にまつわる話

    コンピューターアイコンにまつわる話に続き、PlayStationコントローラのボタンのアイコン誕生秘話が話題です。 あれを考案した元SONYプロダクト・デザイナー後藤禎祐氏のインタビューが週刊ファミ通最新号に掲載され、1up.comの英訳から海外に広まりました。あの何気ないボタンのアイコンにも、ちゃんと秘められた意図があったようです。 (英訳からの重訳)当時ほかのゲーム会社はボタンにアルファベットの英文字か色を割り当てていました。うちは簡単に覚えるものにしたかったので、アイコン・シンボルでいこうってことになり、すぐ私が思いついたのが三角・丸・バッテン・四角の組み合わせした。 さっそく私は各シンボルに意味と色を与えました。 △は視点。頭・方向を示すものです。緑。 □は紙。メニュー・文書を示すもの。ピンク。 ○と×はYESとNOで、赤と青に。 みなさんには色がごっちゃになってると思われ、自分の

    PSコントローラ◯×□△ボタン誕生にまつわる話
  • 本当になぞるだけでOK?――「Swype」で文字入力してみた

    一筆書きのようになぞって文字を入力できる「Swype」が、Samsung電子の海外向けAndroid端末「Samsung GALAXY S」に採用されている。画期的な入力方式に思えるが、当になぞるだけで正確に入力できるのだろうか。 Samsung電子が5月末から欧州や北米、アジア地域での発売を予定している(日での発売は未定)Android端末「Samsung GALAXY S」は、Android 2.1やスーパー有機EL、1GHzプロセッサを搭載するなど、高いスペックが特徴だが、“文字入力方式”にも注目したい。Samsung GALAXY Sは「Swype」と呼ばれるタッチパネル用の文字入力方式を採用しており、画面のQWERTYキーボードを一筆書きのようになぞるだけで文字を入力できる。このほか、Windows Mobile 6.5搭載の「OMNIA II」もSwypeを利用できる。 筆

    本当になぞるだけでOK?――「Swype」で文字入力してみた
    Hamukoro
    Hamukoro 2010/05/04
    あんまキュンとこねぇな
  • 「さわれる立体映像」-映像なのに触感が?東大の不思議プロジェクト | インサイド

    「さわれる立体映像」-映像なのに触感が?東大の不思議プロジェクト | インサイド
    Hamukoro
    Hamukoro 2009/08/16
    wiiリモコン万能すぎすげー
  • OpenOffice.org に MS Office 2007 風の「リボン UI」を搭載する試み | スラド IT

    ストーリー by reo 2009年08月07日 12時30分 Office 2007 を使ったことがないという 部門より OpenOffice.org に、MS Office 2007 風の「リボン UI」を搭載する試みが行われている (このことを伝えるOpenOffice.org エンジニアのブログ) 。 すでにプロトタイプも作られており、OpenOffice.org Wiki のRenaissance:Prototyping ページでこのリボン UI を備えた Impress (プレゼンテーション) アプリケーションのデモをダウンロードできる (要Java 6) 。 一部では非常に評判の悪いリボン UI だが、慣れてしまえば使いやすいという話も聞く。個人的には設定で従来の UI とリボン UI を切り替えられるのが一番良いと思うのだが、とりあえずは先のデモについてのフィードバックも受

  • パスワードのマスキングは廃止すべき | スラド

    ウェブのユーザビリティの権威であるヤコブ・ニールセン氏が「パスワードのマスキングはセキュリティを向上することはなく、かえってユーザビリティを低下させる」との論を自身のサイトuseit.comで展開している(家記事より)。 ニールセン氏によると、システムステータスを可視化しユーザにフィードバックを提供することはユーザビリティの基原則であるとのこと。パスワード入力時に文字列を表示せずに「・」や「●」などの記号を表示することはこの原則と相反すると主張する。 入力時にパスワードがマスクされると誤入力が増えるだけでなく、入力内容を確認できないことからユーザは不安を覚えるという。この不安感からユーザは必要以上にシンプルなパスワードを設定したり、パスワードをどこかのファイルからコピペして、セキュリティを低下させる結果となるとのこと。パスワードのマスクは簡単である上、インターネットの黎明期からデフォル