Webサービスやアプリなど開発や運用に関わっている方であれば、こんなことを耳にしたことがあるのでは無いでしょうか？ 5人でテストを行えば、ユーザビリティ上の問題のうち85%を発見できるこれらは業界的にはある意味で常識ですが、色々話を聞いてみると、この常識の「出処」あるいは「根拠」ってあんまり知られていないようなのです。 もちろん、ちょっと知識のある人であれば、ユーザビリティ業界の第一人者であるヤコブ・ニールセン博士が提唱したというところまでは知識として知っているでしょう。しかしながら、その元ネタとなった論文を実際に読んだ人、あるいは85%という数字の根拠やその条件について理解されている方はどの程度居るのでしょうか。 ということで本記事では「ユーザテストは5人で85%」の元ネタである下記の論文について、解説、と言うとちょっと大げさかもですが、概要を紹介してみたいと思います。願わくば、この記事

検索事業部のデザイナー倉光です。 今回は、開発現場でアイデア発散フェーズにやっていることの一例を紹介したいと思います。UIデザインの手法として比較的知名度は高く、デザイナー以外でも学びたいという要望も多い「ペーパープロトタイピング」についてです。 前提として プロトタイピングにはフェーズと目的に応じて 様々な手法がありますが、今回は「小規模チームでアイデアをぽんぽん出し、伝え合うためのプロトタイピング」の話です。ユーザーに実際に評価してもらうためのプロトタイプの作り方についてはこの記事では割愛させていただきます。 また非デザイナーの方は「いやいや、デザイナーじゃないと画面なんてうまく書けないよ…」と躊躇してしまうかもしれませんが、本記事では社内のディレクター/エンジニア/インターン生が書いた成果物も掲載していますので、そちらも参考になると思います。 目次 目次 1.ペーパープロトタイピング

こんにちは。ユーザーファースト推進室ディレクターの大黒です。 ありがたいことにクックパッドは今年で20年目をむかえ、数多くのユーザーに利用されるまでに成長しました。それ故に発生する課題もあり、今回はその中でもユーザー登録に使われているメールアドレスの課題と対策をご紹介したいと思います。 ユーザー登録の仕組み クックパッドのユーザー登録では、下記の項目が必要となります。 メールアドレス パスワード 郵便番号 生年月日 ※iOSアプリでは郵便番号と生年月日は任意入力となります SNSアカウント認証や認証コードでのアクティベートを採用するサービスが今では主流ですが、20年続くサービスであれば一般的なユーザー登録フローではないでしょうか。しかしながら最近のスマートフォンユーザーの多くはメールを使わないという実態も分かっているため、ユーザー登録にメールアドレスを使い続けるかどうかは、別途議論を進めて

It was a very busy week in the world of fintech, which certainly kept us on our toes. We covered a couple of notable M&A deals (including one of the biggest of the year so far), a different kind o

Prott User Meetup vol.11 Google Playベストアプリ特集 で話したことです。 補足などをここに書きました。 http://tech.pepabo.com/2016/02/05/talked-about-ui-design/Read less

クックパッド編集室の加々美です。 現在、食や暮らしのトレンドを発信するメディアであるクックパッドニュースの開発に携わっています。 「総合職で入社した新卒がクックパッドでエンジニアになるまで」 というエントリを投稿した2015新卒の土谷と同様に、2014年に新卒として入社後、総合職から研修を経てエンジニアへと転向しました。 今回は、クックパッドニュースの管理機能の改善を行う際に注意した点についてお話します。 自分がその管理ツールを使う人になる 事業体制の変化もあり、現状のクックパッドニュースの管理画面に関して、いくつかの運用上の問題点が指摘されており、その改善を行いました。 管理画面改善の進め方としては 「現状の業務フローの把握」「問題点の把握」「理想の管理画面の設計」 という基本的な手順で取り組みました。 現状把握と問題点洗い出しの方法としてまず思いつくのはヒアリング中心で進めていく方法で

ウェブサイトやアプリケーション制作の現場で、非デザイナーが度々デザイナーからフィードバックをもらう内容をアバウトに4原則にまとめました。デザインは理論だそうで、以下に挙げるようなポイントさえ抑えれば非デザイナーでも「ハズさない」デザインをつくることができます(デザイナー談)。 追記[09/23/2015]：参考文献について 本記事は以下に掲載しております参考文献「ノンデザイナーズ・デザインブック(Robin Williams)」の前半部分における要所を引用して作成しています。デザイナーの方が非デザイナーにアドバイスする際に非常に有用な本らしく、私自身受けたフィードバックもこの本の内容に基づくものでした。予想していた数百倍の反響があり心底ビビっていますが、これをきっかけにデザインに興味をもち更に自分で勉強していくきっかけとなれれば本望です。わかりやすくデザインのポイントをまとめてくれた参考文

コードを書かずに、本物のようなアプリを再現できる 簡単３ステップで、動くプロトタイプをすぐに作成できます。Web・iOS・Androidはもちろん、カスタムサイズでもお作りいただけます。 プロトタイプ作成機能 ワイヤーフレーム機能

「日経電子版×Sansanアプリ開発プロジェクト成功への道〜アプリ開発者勉強会Vol.2」で発表したスライドです。 http://connpass.com/event/16187/

日経電子版のリニューアルで、コンセプトモデル設計とプロダクト監修をさせていただいた。 超大型アプリを完全リニューアルするとき、KPIを落とす事なく、どのように整合性やユーザー利便性を担保していくか。 「日経電子版×Sansanアプリ開発プロジェクト成功への道〜アプリ開発者勉強会Vol.2」より http://connpass.com/event/16187/

事前レビュー「UI考（番外編） AppleWatchについて、あまり語られてない視点」の続き、週末に使ってみた雑感。 通知マシーンとしての素晴らしさ 通知マシーンとしては文句なく素晴らしい。手首に対する自然なノックからはじまる通知と確認のプロセスは、ミニマルで合理的に設計されている。Facebookのメッセンジャーやカレンダーなどとの相性は抜群だった。 全てをぶちこわす致命傷 いっぽうアプリのプラットフォームとして考えた場合、これはまだ実用に達していないと判断した。おそらく一番致命的な問題はレスポンスの遅さだ。 Apple Watchの謳う最大の価値は、「携帯を取り出すより楽」なことと「グランサビリティ（一目瞭然性）」だった。ところが実際触ってみると圧倒的に遅い。これはiPhone本体とのBT通信が全てを台無しにしているためだ。 例えばグランスやアプリを使用する場合を考えてみよう。アプリ利

メディア事業部の須藤です。 8/26より、PC版クックパッドのトップページをリニューアルしました。 公開から約3週間が経過しましたが、お試し頂けましたでしょうか？ この記事では、今回のリニューアルを通して解決したかった課題や、新しいチャレンジ、 また、それらを具現化する過程で考えた事を、実際の結果と合わせて書いてみたいと思います。 今回のリニューアルで伝えたかったこと 今回のリニューアルで強く意識したのは、「食にまつわる全般を扱うポータルサイト」として、 クックパッドを再認識して頂けるトップページにすることでした。 クックパッドでは２年程前より、従来のレシピサービスとは別の価値を提供する、新規事業・サービスの開発に注力してきました。 例えば、ECサービスである「産地直送便」や、近所のスーパーの特売品が分かる「特売情報」、クックパッド認定の料理教室を展開する「料理教室」などがあり、 それぞれ

モバイルファースト室の @slightair です。 先ほど、デザインをリニューアルしたクックパッドiOSアプリ 6.0.0 をリリースしました。 https://itunes.apple.com/jp/app/kukkupaddo-no.1reshipi-jian/id340368403?mt=8 この記事では、どのようにして新しいデザインをiOSアプリに適用していったのかを紹介したいと思います。 新しいアプリの画面 スクリーンショットを見ていただければわかるように、全体的にフラットな印象を与える画面に変わりました。 トップ レシピ詳細画面 サイドメニュー この記事で全ての画面を紹介することはできませんが、ぜひダウンロードしてお手持ちのiOS端末で触ってみてください。 新デザインの適用 基本的には、画面デザイン案をもらい、既存のアプリを修正して少しずつ適用していく形で進めていきました。

UIを作るとき，とりあえずデザイナーつかまえて，紙にお絵描きする． 何をどう置くかとか，どこを押すとどうなるか，ここにはこういう説明の文章，とかお絵描きしながら考える． 使いやすさを損なわない限りで手早く作れればラッキーなので，サーバーサイドでこういうデータの持ち方をするとか，こういうJS書けばうまくすばやく作れる，とかまで考えておく． 画面で考えるんじゃなくて，やって来た人がどうなって何をしてどう帰っていくか，というインタラクションで考えるのが大事だと思う． たとえば，ハンバーガー屋だったら，やって来て，カウンターでメニューを見て，なんとかバーガーのセットとか注文してお金払ってちょっと横によけて待つ，ハンバーガー受け取ったら席まで運んで食べてゴミ捨ててトレイは重ねて帰る．こういうインタラクションが分からないままハンバーガー屋の設計をすることはできない．カウンターからメニュー撤去するとどう

LPO研究所所長の鎌田です。 スマホサイトを用意するのがもはや当たり前になりつつある昨今ですが、スマートフォン対応を急ぐあまり、問合せフォームのユーザビリティがないがしろになってしまっているサイトをよく見かけます。 スマホユーザーの環境は、PCユーザーに比べてあらゆる点でシビアです。いい加減なスマホ対応をしただけでは、そうそうコンバージョンのアップにはつながりません。 下記の事例をご覧ください。 これは、あるブライダル系サービスのPC向け問合せフォームをスマホ最適化したところ、スマートフォンからのコンバージョン率が３倍以上になった事例です。このように、スマホユーザー向けに問合せフォームを最適化するだけでも、コンバージョン率はしっかり上がるのです。 今回は、弊社でスマホ向けフォーム最適化を行う際にいつも心がけている「５つの原則」について、具体例を交えてご紹介します。あなたのスマホ向けフォーム

AI, emotional design, weird careers, and other takeaways from Figma’s 2024 conference

クックパッドのユーザーファースト推進部 部長でデザイナーの池田拓司さん。多摩美術大学を卒業後、ニフティに入社。その後、はてな を経て2012年にクックパッドへ入社しました。 社内のメンバーから、「新規事業が増える中で、クックパッドらしさを守る“クックパッドの良心”」と表される池田さん。彼が言語化し、社内外に対して守り抜く「クックパッドらしさ」とは。 生活に近いサービスをつくりたい デザイナーとして新卒入社したニフティで3年間働いた後、まだ当時10名ほどだった はてなに転職した池田さん。より生活に近いサービスをつくりたいという思いで、7年間勤めた はてなからクックパッドに転職しました。 2014年4月に「デザイン部」は名前を変え「ユーザーファースト推進部」に。社長直轄の部署であるため、お客様の声が経営陣にも届きやすい体制が出来ています。現在はデザイナーを中心とする8人のメンバーで構成されるチ

ビスケットは，開発して新しい機能を追加したときなど，必ず子どもたちが使っている様子を自分目で見てどんな風に使っているかを見てきます（最近はその暇が無くて他人に任せていたりして，かなりまずいんですが）．3年前くらいの面白いエピソードをご紹介しましょう． ちょうど，Androidタブレットで動くビスケットを開発していて（これはまた一般には配布していません．実験環境だけです），それがどのように子どもたちに使われるか見に行きました．僕としても指で直接操作するタブレットのUIの開発は初めてで．実は，マウスとタッチペンの操作は結構似ています．どちらも，非常に小さいエリアを結構正確にポイントできて，ドラッグもできますから．どちらかというと，ペンの方がドラッグが得意でしたね．小さい子はマウスクリックが全然出来ないとか（ボタンを押すときに指先だけ押すということができないので，手を握ってしまって，その結果マウ

入力フォーム（エントリーフォーム）を入力していて、イライラする……と感じたことありませんか。ありますよね。自社サイトの入力フォームでユーザーにイライラを与えていませんか。 小さなイライラが積み重なった先にあるのは、エントリーフォームからの離脱です。ユーザーが一度エントリーフォームから離脱してしまったら、もう戻ってきてはくれないと覚悟しておくべきです。入力を完了してもらいエントリーフォームの「入力完了率※」を上げるためにはどうしたらよいのでしょうか。 そこで、この記事ではEFO（エントリーフォームを最適化）を行い離脱要因を減らして、入力完了率を上げる15カ条を紹介します。 少し手間をかければ劇的に入力完了率アップが期待できるはずの、「惜しい」エントリーフォームを各条1つずつ取り上げて、頼まれてもいないのに、勝手にそのフォームを分析して作った改善案とともに、ポイントとなるエントリーフォーム改善