エンジニアtype 技術者のキャリアを考えるWebマガジン - 転職＠typeエンジニアtypeは、各種エンジニアをはじめ「創る人たち」のキャリア形成に役立つ情報を発信する『＠type』のコンテンツです。
情報がないことを伝えるUIデザイン | UXデザイン会社Standardのブログ
「Empty Data（またはEmpty Status）」というUIパターンがあります。タイムラインやドロワーなどデザイナーであれば知っているUIパターンの名称に比べると、あまり日本では聞き慣れないのかもしれません。Empty Dataは簡単に言うとデータがない時のUIになります（Webでの404に近いですが、少し違います）。では、Empty Dataを知るためにもう少し詳しく紹介していきたいと思います。 参考：モバイルデザインパターン 第2版 ―ユーザーインタフェースのためのパターン集 Empty DataはUIである Empty Dataはただユーザにデータがないことを示すだけではありません。ユーザにデータが存在しないという情報をフィードバックし、どうしたらここに情報が入るかのアクションに繋げる立派なUIです。もしEmpty DataのUIが存在しなかったらユーザはどのように感じるでし
ソシオメディア | あるとよい機能はない方がよい
UXデザインのコンサルティングではよく品質優先度マッピングというものを行います。これは開発プロジェクトの上流工程において、実装を検討している機能をリストアップし、そのひとつひとつについて想定する利用者の割合や利用頻度の観点からグルーピングし、実装の優先度を決める作業です。 これを行う目的は、UIをできるだけシンプルに保つことにあります。ユーザーが求める機能をすべて盛り込むと、当然UIは複雑になり、誰にとっても使いにくいものになります。また蓋然性のバランスが取れていない要件はプログラムを複雑にし、バグが増える原因になります。 UIデザインにおけるパレートの法則（結果の大部分は全体の一部によって生み出される）は、「ユーザーの80%は全機能の20%しか使わない」というものです。その20%に注力し他の優先度を下げることで、製品の利便性は向上するはずです。 Core, Important, Nice
なぜAmazonのメガドロップダウンメニューはスムーズに操作できるのかという秘密
日本のAmazonでも採用されているメガドロップダウンメニューについて、なぜAmazonのメニューはユーザーが使いやすくできているのかという秘密が明らかになりました。ユーザビリティを改善することが至上命題のネットショッピング系サイトにとっては非常に有益な知識となっています。 Breaking down Amazon’s mega dropdown - Ben Kamens http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown まずこれがAmazonの左上にあるカテゴリーを一覧化したメガドロップダウンメニュー。日本のAmazonにも同様のメニューが採用されており、マウスカーソルを上に持っていくと実にスムーズに動きます。 通常のメニューの場合、以下のようにして少し遅れてサブメニューが開くようになっています。 な
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
天外IIのUIについて（１）::Colorful Pieces of Game
しばらく間が開いてしまったので、リハビリがてらに、前回の続きではないけれど、作っていた人間にとってはいろいろ思いで深い話などちょっと書いてみたい。 つーか、こんな風に落ち穂拾いしていかないと、なんだか粗筋だけの小説みたいになりそうな気がしたので、いろいろ書いていこうというわけ。 今回は、UI、ユーザーインターフェースについて。 さて。 天外２というゲームは対面戦闘の全盛時代が終わりにかかろうとしていた、スーパーファミコン登場前夜に企画がスタートし「王道」を要求されたために、実にこまごまとUI周りに微妙な問題が発生したソフトだった。 そして、たぶん２回でまとまる予定の、このシリーズではちょっとそれについて書いてみようというわけだ。 天外２の企画がスタートしたときは、まだ「Aボタン（PCエンジンではIボタンだが、面倒なのでAと表記する）」を押すことで、目の前の人と話したり、宝箱が開いたりといっ
「Forkwell を始めたことを Facebook に共有しない」という選択はアリか? - ただのにっき(2012-08-23)
■ 「Forkwell を始めたことを Facebook に共有しない」という選択はアリか? 今日とどいたForkwellのニュースレターに、ユーザ登録の最終ステップで従来は下記のようなチェックボックを設置していたのを: ☑ Forkwell を利用開始したことを Facebook で共有する 以下のように変更したと書いてあった: Forkwell を始めたことを Facebook に共有しない 理由は、多くのユーザがチェックを外してFacebookへの投稿を避けるからだという。バイラルによるプロモーションに依存しているサービスだからぜひともここでシェアしてもらいたいとのこと。Forkwell側の要件はわかったけど、だからといってユーザにとってこの変更は「なし」だと思うんだけど。 UI設計の基本として、否定形の選択肢は避けるべきだ。否定形の設問にチェックを入れると何が起きるのか理解する
Path CEOが断言-Mobileアプリの初期バージョンは必ず失敗する その理由 デザイン会社 ビートラックス: ブログ
“恐らくモバイルアプリの初期バージョンのほとんどはユーザーが集まらずうまくいかないだろう。僕のチームが作ったアプリの1st. バージョンもかなりの大失敗だと認識している。” PathのCEO, Dave Morinはそう語る。 モバイルアプリに於いてリリース直後よりいきなりのヒットを生み出すのは至難の業である。彼によると、ユーザーが心地よく使えるレベルまでにUI/UXをシンプルにデザインするのがとても難しいからである。 “モバイルアプリをシンプルにデザインするには非常に時間がかかる。恐らく多くのデベロッパーが最初は素晴らしいと思ったコンセプトを形にしてリリースをする。そして最初のプランとはほど遠い結果を見て絶望するだろう。その時に考えなければ行けないのは、そこで止めてしまうべきかどうか。 理解してほしいのは、初期バージョンはほぼ確実に失敗するという事。重要なのはその結果を踏まえ、数字だけの
【インタビュー】クックパッドのUIデザイナー：「エンジニアの仕事が０を１にする仕事なら、デザインは1を100にする仕事 」 | Startup Dating
Startup Datingでインタビュー連載を始めてみることになりました。さて連載の初回は、2011年に新卒としてクックパッドに入社し、現在UIデザイナーとして活躍する片山育美さん（@monja415）。片山さんが現職に就くまでの道のりや、クックパッドのUIに関する考え方、片山さんが手がけた具体的なUI改善の事例やヒントなどをたっぷりお伝えします。 美術大学で勉強、もともと職人になりたかった もともと絵を描くのが好きだし得意、高校のときから職人になりたいと思っていたと話す片山さん。美術大学に進学し、ファイン系とデザイン系でデザイン系を学ぶことを選択。ファイン系とは、絵画や彫刻などいかにも“アート”というもの。ファイン系が芸術だから、どこか自分の中で完結してしまうところがある。でも、職人って誰かのために技術を使える人なんじゃないか、と。情報デザイン学科を専攻し、サービスデザインやUXと言わ
すばらしいソフトを作るには、カリスマが講演 ― ＠IT
記者という職業柄、これまで非常に多くのプレゼンテーションを見てきたが、プレゼンテーションの1枚目が半裸の女性モデルの写真だったのは初めてだった。 2月13日、14日の予定で東京・目黒で開催中の「デベロッパーズ・サミット2008」で講演したFog Creek Softwareの創業者でCEOのジョエル・スポルスキー（Joel Spolsky）氏のプレゼンテーション「Joel on Developers Summit――素晴らしいソフトウェアを作るということ」は、型破りに楽しく、なおかつソフトウェア開発者にとって示唆に富む内容だった。 スポルスキー氏は米マイクロソフトのExcelチームで、Excel用マクロ言語を、後にVBAと呼ばれることになるモダンなオブジェクト指向言語に置き換える仕事でプログラムマネージャを務めたことがあるなどソフトウェア開発のベテランだが、エッセイの書き手としても名を馳せ
何故、エンジニアはUIのセンスがないか。
何故、エンジニアはUIのセンスがないのか、という自分にも当てはまるようなことについて書いてみる。 まずエンジニアがダメなUIを作ってしまう理由について、いくつかの仮説を立ててみる。 1.その画面を作るエンジニアは全てを知りすぎていて、もはやわからない人の気持ちがわからない説 2.エンジニアはITリテラシーは高いけど、自分ができることを人に理解できるように説明するのは下手説 3.技術的に実現する方に興味が偏って、ハナからUIの使い勝手に興味が無い説 4.国語力がない、自分が実現する文脈を表現するのはできるが、ユーザーの文脈に配慮した言葉を想像する力が無い説 5.仕様書を読まない、人の言う事を聞かない説。例えばOSが定めているユーザーインターフェースガイドラインに従わないので、UIパーツが意図した使い方をしておらず統一性に欠ける。 6.わかりやすい色や文字、レイアウトに関する知識が無い。センス
スマホアプリ開発現場におけるUI採用の試行錯誤 - ロケタッチの場合 - : LINE Corporation ディレクターブログ
こんにちは、ユティです。ロケタッチを担当しています。 スマートフォンで展開するサービスの開発では、1つ大事なことがあります。それは、4インチ前後の画面にすべてを詰め込まなくてはいけないということです。これ以上、画面のサイズが大きくなると片手で持てなくなるので、この4インチ前後というサイズのトレンドはしばらく続くでしょう。アプリが複雑になればなるほど、この狭い画面に展開する UI で悩むことになり、その度に私たちはいろいろな方法でその壁を乗り越えていくことになります。 ロケタッチも、リリース以降機能がどんどんと増え、その度にアプリ内の UI、特にメニューのところをどうしようかという話になりました。今回は、そのメニュー周りのUIを中心に、近頃のロケタッチのUI事情についてご紹介したいと思います。 代表的なメニューUIと、トレンドのスライドメニュー まず、過去のロケタッチを例に、多くのスマートフ
話題のアプリ『Clear』のUIを独自実装してみた！(+Gumroad)
ひとつ前のエントリーの続きです！(動画も同じ) 今回こそ、当初の目的であった 『Clear for iPhone』のUIを独自に再現した実装 についての解説を書いていきますね。 初めに断っておきますが、今回のエントリーはStudy CoreDataシリーズのようなチュートリアルではありませんのであしからず。。 部分部分でどういった実装をすればあのUIが実現出来るのか？というポイントを解説していきます。 このエントリーの最後に、Clearと同じくなにかと話題のGumroadでテストアプリを公開していますので欲しい方は是非！ (※ 更新：内容が古くなったため公開は終了しました) では、まず目次をば。 。。と、その前に前のエントリーで書きそびれてしまった事があったので。 ようこそタッチフリーの時代へ！画面に触れずに本が読める、MagicReaderを発表！ – STUDIO LOUPE こちら、
Webサービス開発で知らないと損する！登録フォームでユーザーを逃さないのために必要な5つの手法
Webデザイナーや開発者さんは、いかにして多くのユーザーに途中で断念することなく、登録を完了させてログインしてもらうかということに、日々頭を悩ませている人もいらっしゃると思います。 この記事では、最近のWebサイトやサービスに見られる、ユーザー登録のための導線手法を紹介します。ぜひ、新しいサービスを考える際に参考にしてください！ Don't miss it!。 手法1. モーダルダイアログを使う ※イメージは、ゲッティ イメージズのものです。 モーダルダイアログとは、↑のようなページの上にページを重ねたような効果を言います。実はアレは、カッコいいだけではないのです。 この手法では、別にユーザー登録ページを設ける方法に比べて、ページ遷移によって利用者の意識が外に移ることがありません。 また、利用者には、目的のゴールが後ろに透けて見えている状態になるので、いつでも元のページ帰れる安心感があり、
カッコいい時計ウィジェットをリリースしました。
Band O'clock 複数並べて世界時計のようにしたり 好きなフォントにしてみたり できます。 ウィジェット本体よりも設定画面にかなりこだわってます。 デフォルトの PreferenceActivity を使って簡単に作ることもできますが、それって使いにくくないですか？ ・その設定によってウィジェットがどう変わるのかわからない ・設定をやり直すのに毎回ダイアログを開かないといけない このあたりを改善したくて、 ・設定画面にウィジェットのプレビューをつけて設定によってリアルタイムで変わるように ・複数の選択肢から1つを選ぶのに Spinner を使わない というポリシーで、こんな感じの画面になってます。 各画面にはフリックで移動できます。 フォントも変えられます。 フォントインポート機能を購入すると、自分の用意した好きなフォントも使うことができます。 色を変えたり 都市名やタイムゾーンを
スマホアプリの「使いやすさ」とは何か、を考えてみた - もとまか日記Ｚ
スマホアプリの使いやすさって、なんだろう？ 実は最近、よく考えてるテーマです。そんな感じのメモ。 「使いやすい」時、どう感じるのか まず、使いやすい！と思った時にどう感じてるのか、を整理してみると、・なんか気持ちイイ！・こりゃ簡単！・また使いたくなってくる！そして、・長く使うようになる・そのうち無意識に使うようになる つまり、使いやすさの重要なポイントとは以下。・簡単・気持ちよい 「簡単」ってなんだろう では、簡単って何でしょう？・見ただけで分かる・迷わない・（他のアプリと）操作が同じ・ボタン、機能の数が少ない・数が多いと選択、判断が入る故、難しい・５個がボーダー かも？・スーパーヒーローも基本は５人。・そういう意味では３個もアリ。・慣れたら５個以上になっても平気。・その頃の「基本の５個」はきっと空気のような存在になってる。・つまりスーパーヒーローでシーズン中盤から追加メンバが入るのは 決
text.ssig33.com - Instagram の iOS アプリの UI と UI における「速さ」について考えてみた。
Instagram の iOS アプリの UI と UI における「速さ」について考えてみた。 Instagram の iOS アプリは出来がいいとは言い難いレスポンスであるが、 UI の速さについて一点優れた設計が為されている部分がある。それは写真の投稿のフローだ。 Instagram では 写真の撮影またはカメラロールからの選択 フィルタの適用 コメントやジオタグや連携先の記入 投稿 という順序で写真の投稿が行なわれるが、 2. が完了した時点で実はアップロードが開始されており、 3. でもたもたとコメントなどを記入している間にアップロードが終わってしまい、コメントを記入しおわるとさも一瞬でアップロードが終わったかのように見える。 つまり、通信が分散され非同期に行なうことで、ユーザーからの I/O 待ちとネットワークの I/O 待ちのタイミングを被せることでユーザーへのストレスを最小限
スマホUI考3 ～ ジェスチャ入力について | fladdict
スマホUI考１ 〜 ボタンについて スマホUI考２ 〜 フィードバックについて スマホといえばジェスチャー入力、ジェスチャーといえばスマホ。そんなジェスチャーについて、つれづれと。 でも個人的には、ジェスチャーはほとんど要らないと思う。 ジェスチャ全般 ・ジェスチャは補助操作。メイン操作ではない。 ・ボタンでできる操作をプラスアルファで、ジェスチャでもできるようにする。 ・なぜならジェスチャの有無は視覚的にわからない。 ・ユーザーがジェスチャを理解しなくても操作できるのがよい。 ・またジェスチャー時に、画面のかなりの部分が指で隠れる。 ・極論ジェスチャなしでもアプリがリリースできる状態なのがよい。 ・つまり予算や工数があまったときに入れよう。 タップ ・マウスクリックではなくタップ。 ・ボタンの精度は指のサイズに依存する。 ・細かい座標指定はできない。 ・ロールオーバーがない。 ・触ってみ
『iOSヒューマンインターフェイスガイドライン』はUI解説書の枠を越えている ：国内・海外情報から見える『企業のWEB活用法』：ITmedia オルタナティブ・ブログ
中小企業がITを活用して売り上げにつなげるにはどうしたらいいか？WEBマーケティングとWEB戦略コンサル実績350社50業種以上の実績とノウハウで、海外の最先端情報を中心に、噛み砕いてご紹介。 作成者：中山陽平 iOS、実質的にはiPhoneのアプリケーションを作る際に参照してくださいと言う事で配布されている「iOSヒューマンインターフェイスガイドライン（以下iOS_HIG）」 弊社のシステムを真剣にスマートフォン対応にするために読み始めたのですが、この内容が、ただのインターフェイスのガイドラインだけではなく、さらに踏み込んだ内容になっていて驚きました。 Appleのサードパーティアプリに対する姿勢、サードパーティアプリケーションがiPhoneの大きな魅力であるという認識が、このガイドラインからはにじみ出ています。 App開発者以外もぜひ見ておくべき これはぜひ、WEBに関わる方は見て頂き
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「Facebook、Quoraのユーザー獲得チームの秘密」のまとめ
