失敗上等！世にも奇妙な「旅行会社でのUXデザイン 裏話」 #devlove #devlove創DevLOVE現場甲子園2014 東日本大会で発表した資料です。 舞台はフツーの旅行会社。 UXデザイン知識の薄いwebディレクターが、ユーザーテストを丸投げされる →当然金も工数も権力もない →数値的成果と、ユーザー中心デザインの狭間で悪戦苦闘 →阿呆な失敗をやらかしつつも、組織でUXデザインが根付き始める という泥にまみれた過程を話します。泥泥。
UXをみっちり基礎から教わることができた「モバイルUI/UXのキホン」って勉強会のレポート！
10/4に渋谷で開催された「モバイルUI/UXのキホン」 に参加しました。2011年からいろいろなテーマで開催されている歴史のある勉強会なのと、ディスカッションや意見交換を通じた双方向性を大切にしている、学びの多い勉強会でした！ 今回は勉強会の中で特に参考になった点を書いていきます！ 🍣 発表スライド発表の際に使われたスライドです。しっかりとした内容です！ 発表スライドは「prezi」というサービスを使っているそうです。動きのあるカッコイイデザイン！ 🎃 UI/UXは最近のバズWordデジタルガジェットでは特にいえることですが、市場が成熟してきて機能的な差別化が難しくなってくると、ユーザーの体験(UX)が重視されるようになってくるそうです。スマホアプリケーションは特にこういった要素が強く、ココ最近は『UI/UX』がバズWordになっているそうです。 🐹 UI/UX/IAの言葉の定義ま
スマホUI考（番外編） なぜ機能追加をし続けるとアプリが破綻するのか？ | fladdict
この写真は、アーミーナイフの名門ウェンガー社のジャイアントナイフという最高級ナイフである。141の機能を持つ、ギネス認定もされた厚さ24cm、重量1.3kgの世界で最も高機能なナイフだ。トップメーカーが自社製品の全機能を１つに集約したこの製品こそが、機能拡張の行き着く先を指し示している。 なぜ適切な機能追加であっても、機能を追加しつづけることで破綻をするのか？本エントリは、「スマホUI考（番外編） 顧客やユーザーの要望に全て対応すると、アプリは99%破綻する」の続きになる。 本エントリでは以下の４つの側面から、機能を追加するリスクを考える。まず第一に「選択肢の数が必ずしも善ではないこと」。次に「人間の判断力は使うほど消耗すること」。そして「画面スペースが有限のリソースであること」。最後に「どんなに機能を増やしても、一画面で強調できるものは限られていること」。これらの４つは全て、機能追加が最
【UI調査】スマホ・アプリのスイッチの意味をユーザは理解できているのか？
1. やはりスイッチの記号は分かりにくい 先日、「【|と◯】知ってる？ アプリや電機のスイッチと電源ボタンの記号の意味」という記事を掲載したところ、予想外に反応が大きかった。 「 | 」と「 ◯ 」は、それぞれIEC（国際電気標準会議）によって国際的に標準化された記号であり、前者が電源ON（オン）、後者が電源OFF（オフ）を意味するものだ。 スイッチに採用されているこれらの記号の意味が分かりにくいことをテーマにした記事だったが、反応の大きさやソーシャルメディア上のコメントなどから、筆者と同様にこれらの記号のみではスイッチのONとOFFを判断しにくいと感じている人が多いことが分かった。 また、スイッチの操作部分上にON・OFF表示があったり、iOSの設定アプリのようにスイッチ内部の操作部分以外の場所にON・OFF表示があると、現在の状態を示しているのか、操作後の状態を示しているのか混乱すると
スマホUI考（番外編） 顧客やユーザーの要望に全て対応すると、アプリは99%破綻する | fladdict
顧客や上司、ユーザーの場当たりな要望に対応しつづけると、どんなアプリもゴミアプリになる。たとえそれが理にかなった要望であっても。 なぜなら面積の限られたスマホでは「一画面の機能数とボタン数」が、使い易さと品質に深くリンクしているからです。 ということを、エラい人にプレゼンするのがお仕事の今日この頃。でも毎回毎回、同じことを説明するのがシンドイので資料をブログにまとめたいなぁと思うなど。 思考実験として、ここでは架空事例としてTwitterアプリを例に考えてみる。 何かの間違いで、日本の大手メーカーがTwitterを買収すると・・・UIデザイナーが体を張らないと99%ぐらいの確率でこうなるのです。 ここがオリジナル Request1: ダイレクトメッセージをトップ階層に ユーザーからの真っ当な要望。実際にはサービスの本質ではないのですが、要望はかなり多いはず。 ただTwitter社的にはme
UIデザインのアニメーションまで共有できるモック作成ツールまとめ | Goodpatch Blog
先日、Goodpatch代表の土屋がWebSig会議というイベントで講演をしました。講演は「ハートに響くUIを生み出すためのデザインプロセス」というタイトルで行われ、起業までのストーリー、GoodpatchのUI設計プロセスなどについて話しました。講演内容は↓のslideshareを参照してください。 その講演の中でGoodpatchはデザインする際にプロトタイプを作成していると話しました。以前にMEMOPATCHでもインタラクションや導線の動きを伝える上でプロトタイプ作成が重要という趣旨の記事をアップしています。 （参考: これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう（前編）, （後編）） プロトタイプ作成というとHTML, CSS, JavaScriptで実装する方法がメジャーかと思いますが、これだとリソースをかなり割くことになってしまいます。そこで今回は
スマフォアプリの操作が気持ちいいエフェクトがたくさん！タップ操作時のエフェクトのまとめ -Tapotype
Tapotype 掲載されている各エフェクトはタップやクリック操作で、実際にアニメーションで動作します。 サイト閲覧には、Safariをオススメします。 各エフェクトはカテゴリ別にまとめられており、それぞれ詳細ページも用意されています。
これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう（前編） | Goodpatch Blog
先日、長谷川恭久さんとの共同プロジェクト、“Patch Project”がスタートしました。これはUIデザインの新しいワークフローを作るために立ち上がったプロジェクトです。これまでのワークフローを見直して、より良いUIを作っていくためにはどうするべきなのか、実際に何かのUIをデザインしながら模索していきます。そのプロセスや結果はどんどんオープンにしていきますのでお楽しみに！ まず今回はその導入部分として、ワークフローの提案について長谷川さんに話して頂いた内容を記事にしました。前編では、デザインカンプをやめてプロトタイプを作るべき理由を中心にまとめています。 そもそもUIとは何か UIの話というと多くの人がビジュアルデザインの話をしますが、そもそもUIとは人間とコンピュータの関係を円滑にするためのものです。人がコンピュータと関わるとき、そこには必ずインプットとアウトプットがあります。その中で
書評『スマートフォンのためのUIデザイン』 - Kentaro Kuribayashi's blog
tikedaさんより、新著『スマートフォンのためのUIデザイン』をご恵投いただきました。ありがとうございます。結論からいうと、名著、英語でいうと、"Epic, just epic"って感じ。必読です。 スマートフォンのためのUIデザイン ユーザー体験に大切なルールとパターン 作者: 池田拓司出版社/メーカー: ソフトバンククリエイティブ発売日: 2013/03/30メディア: 大型本 クリック: 117回この商品を含むブログ (2件) を見る 本書は、スマートフォン用のアプリ・ウェブサイトのパタンを分類・整理した上で、網羅的に紹介する本です。かつての類書に『iPhoneアプリ設計の極意 ―思わずタップしたくなるアプリのデザイン』という本があって、これはこれで素晴しいのですが、本書はカタログに徹したことで、さらに価値を高めていると感じました。 そもそもデザインにとって、パタン化は伝統的な営み
なぜAmazonのメガドロップダウンメニューはスムーズに操作できるのかという秘密
日本のAmazonでも採用されているメガドロップダウンメニューについて、なぜAmazonのメニューはユーザーが使いやすくできているのかという秘密が明らかになりました。ユーザビリティを改善することが至上命題のネットショッピング系サイトにとっては非常に有益な知識となっています。 Breaking down Amazon’s mega dropdown - Ben Kamens http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown まずこれがAmazonの左上にあるカテゴリーを一覧化したメガドロップダウンメニュー。日本のAmazonにも同様のメニューが採用されており、マウスカーソルを上に持っていくと実にスムーズに動きます。 通常のメニューの場合、以下のようにして少し遅れてサブメニューが開くようになっています。 な
最良のインターフェイスとはインターフェイスを持たないことだ - Nothing ventured, nothing gained.
Visual Basicの父とも言われるAlan Cooperが立ち上げたCooperに所属するGolden Krishnaが数日前に書いたブログ記事が面白いので、ざっと抄訳してみた。 "The best interface is no interface"と題されたこの記事の中で、彼は「最良のインターフェイスとはインターフェイスを持たないことだ」と主張する。 インターフェイス前提の社会 AppleのLisaは、DOSのようなCUI（キャラクターユーザーインターフェイス）から、GUIの世界にデザインを一変させた。そして、Palm Pilotから現在に至る情報機器はマウスさえ必要なく、タッチで操作できる世界を実現させた。この流れが現在のデザインの問題をすべて解決することになった。 では、良い自動車を作るにはどうするだろう？ そうだ、インターフェイスをそこに載せよう*1。 良い冷蔵庫を作るには
クックパッド流UIの作り方 - takeshi nagayama's blog
なんか突然東京行きたくなったので、ひょひょいと行ってきた。 たまたま立ち寄ったクックパッドっていう会社でクックパッド流UIの作り方という勉強会してたので、偶然持ち合わせていたはてなステッカー渡したりおいしい料理いただいたりした。 UI/UXのためのSass 池田さん / サービスデザイン部 Sass / Haml (エンジニア・デザイナー問わずに) Github デザイナーもpull req 一つのサービスを複数チームで開発 各デバイスで速いサイクルでの開発 Sassとは → ぐぐれ 全体のデザインを束ねる → デザインガイドライン ガイドライン Sassで統一的なものを提供する 画像を使わずにCSSでデザインするメリット mixinをつかって統一できる 画像編集がいらない プロパティの変更によってデザインに幅をもたせる事ができる mixinの中身は応用がきくような仕組みにしておく 検証を
Path CEOが断言-Mobileアプリの初期バージョンは必ず失敗する その理由 デザイン会社 ビートラックス: ブログ
“恐らくモバイルアプリの初期バージョンのほとんどはユーザーが集まらずうまくいかないだろう。僕のチームが作ったアプリの1st. バージョンもかなりの大失敗だと認識している。” PathのCEO, Dave Morinはそう語る。 モバイルアプリに於いてリリース直後よりいきなりのヒットを生み出すのは至難の業である。彼によると、ユーザーが心地よく使えるレベルまでにUI/UXをシンプルにデザインするのがとても難しいからである。 “モバイルアプリをシンプルにデザインするには非常に時間がかかる。恐らく多くのデベロッパーが最初は素晴らしいと思ったコンセプトを形にしてリリースをする。そして最初のプランとはほど遠い結果を見て絶望するだろう。その時に考えなければ行けないのは、そこで止めてしまうべきかどうか。 理解してほしいのは、初期バージョンはほぼ確実に失敗するという事。重要なのはその結果を踏まえ、数字だけの
UIデザイナーが知っておくべきエンドユーザーの10の特徴
ユーザーの視点に立ってデザインされていないインターフェースは、エンドユーザーに受け入れてもらえないはずだ。そこで本記事では、UIデザイナーが念頭に置いておくべきユーザーの習慣や考え方について焦点を当てる。 つい最近、「Ubuntu Unity」はUbuntuに正式搭載されてから1周年を迎えた。また、「Windows 8」はリリースを間近に控えている。こういった状況のなか、すべてのユーザーインターフェース（UI）は同じように作られていないという事実が明らかになってきている。実際のところ、コンピュータの使い方に革命的な変化をもたらすような素晴らしいUIデザインもあり得るだろうが、エンドユーザーを念頭に置いていないものは、その素晴らしさを証明する間もなく失敗作という烙印を押されてしまうはずだ。 筆者は長年に渡るコンピュータ経験のなかで、ほとんどすべてのLinuxデスクトップと、あらゆるバージョン
UXとUIが混同されるワケ
最近 UX と UI を混同して表記されているのを見かけるようになりました。私もウケやすいということで、混同させたことがあります。しかし実際のところ UX と UI は同義語ではありません。良い UI デザインをすれば、UX が向上する可能性はありますが、必ずしもそうではありません。逆もしかりです。最近も UX と UIの違いを分かりやすく表現しようと、シリアルとボールの写真を使った例が登場しましたが、「そうでもない」という意見も多数ありました。 それでは、なぜ混同されやすいのかというと、今のスマートフォン向けのデザインを見るとヒントが隠されています。例えば Twitter クライアントの中で人気のある Tweetbot を見てみましょう。このアプリの中で装飾と呼べるデザインはどれだけあるでしょうか。ほぼ皆無だと思います。 スマートフォンという小さなスクリーンには、UI しか存在しません。
ソフトウエアエンジニアがUX/UIを考える上で読むべき4冊の良書と名言たち
筑波大学 システム情報工学研究科 コンピュータサイエンス専攻 非数値アルゴリズム研究室(NPAL) 五十嵐 悠紀 2004年度下期、2005年度下期とIPA未踏ソフトに採択された、『天才プログラマー/スーパークリエータ』。筑波大学 システム情報工学研究科 コンピュータサイエンス専攻 非数値アルゴリズム研究室（NPAL）に在籍し、CG／UIの研究・開発に従事する。プライベートでは二児の母でもある 何か製品を考える時、そのものがカタチのあるものであっても、はたまたコンピュータの中で動くソフトウエアだったとしても、「ユーザーインターフェース（以下、UI）」について考える必要があります。さらには、わたしたちが日常生活においてストレスなく過ごせている裏側には、さまざまな人によって考えられてきたUIデザインが隠されていたりもします。 わたしは滞在先のホテルで、洗面所に入ったものの出ようとした時に
何故、エンジニアはUIのセンスがないか。
何故、エンジニアはUIのセンスがないのか、という自分にも当てはまるようなことについて書いてみる。 まずエンジニアがダメなUIを作ってしまう理由について、いくつかの仮説を立ててみる。 1.その画面を作るエンジニアは全てを知りすぎていて、もはやわからない人の気持ちがわからない説 2.エンジニアはITリテラシーは高いけど、自分ができることを人に理解できるように説明するのは下手説 3.技術的に実現する方に興味が偏って、ハナからUIの使い勝手に興味が無い説 4.国語力がない、自分が実現する文脈を表現するのはできるが、ユーザーの文脈に配慮した言葉を想像する力が無い説 5.仕様書を読まない、人の言う事を聞かない説。例えばOSが定めているユーザーインターフェースガイドラインに従わないので、UIパーツが意図した使い方をしておらず統一性に欠ける。 6.わかりやすい色や文字、レイアウトに関する知識が無い。センス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
モバイルアプリのUIを処理系統でまとめた『UX Archive』 | 100SHIKI
ウェブページやスマフォアプリの制作時に参考にしたいUIエレメントをコレクションしているサイトのまとめ
勘違いだらけのAndroid UIデザイン
