ECzine Day（イーシージン・デイ）とは、ECzineが主催するカンファレンス型のイベントです。変化の激しいEC業界、この日にリアルな場にお越しいただくことで、トレンドやトピックスを効率的に短時間で網羅する機会としていただければ幸いです。

公開日 : 2014年5月21日 (2014年6月4日 更新) カテゴリー : ユーザビリティ / 情報設計 (IA) Web サイト上に提示される情報は、「シンプル」であるに越したことはありません。ユーザーの目的達成に関係しない情報ノイズは、極力、無いのがよいと言えるでしょう。 そして、その情報が不要なノイズかどうかは、ユーザーの目的の大小や粒度、ユーザー自身の当該分野に対するリテラシー (理解の度合い)、ユーザーの利用コンテキスト、などによって異なります。 この記事では、ユーザーに合わせて情報ノイズを排除する考えかたとして、「Progressive Disclosure」と「Progressive Reduction」について考えてみたいと思います。 Progressive Disclosure (プログレッシブ ディスクロージャー) 「Progressive Disclosure」と

公開日 : 2015年6月6日 (2015年6月10日 更新) カテゴリー : ユーザビリティ Pull to refresh という UI パターンがあります。タッチインターフェースにおいて、指を下方向にドラッグして離すと、画面の表示内容が最新状態に更新される、というものです。 iPhone を例に挙げると、Twitter、Facebook、Instagram、Pinterest、Swarm、Dropbox、Google Drive、Gmail、YouTube、…など多くのアプリで採用されており、アップル純正のメールアプリや Podcast アプリなどにも採用されています。 iPhone の Twitter アプリの pull to refresh。指を下方向にドラッグすると図示のようにローディングアイコンが現れ、指を離すとタイムラインが更新される。 この pull to refresh

サイトのUIを検証 １．TOPページ/カテゴリページ TOPページ（左）の表示に必要にして、スマートフォンECサイトとして売上を上げていく上で、必要な情報が表示されており、賑わっている感じも出ています。 その中でも目に留まったのが、スマートフォン以外の携帯電話では、間もなく通信販売を終了するというお知らせ。 MM総研「2014年度通期国内携帯電話端末出荷概況」（http://www.m2ri.jp/newsreleases/main.php?id=010120150514500）によると 携帯電話の出荷台数のうち約4分の3はスマートフォンですが、フィーチャーフォン出荷台数は前年度比6.0％増といったデータも出ています。 根強いフィーチャーフォンユーザー向けにも通販を継続させるかの判断は、どのECサイトでも悩ましい決断なのかもしれません。 カテゴリページ（右）でも、商品のサムネイル画像や販売

UXデザインをするならこの本を読もう！ 安藤先生のおすすめ書籍 ユーザー志向のものづくりの実践～安藤昌也氏（番外編） UXデザインを手がけるときに参考になる書籍を安藤先生に紹介してもらった。人間中心設計、インタビューの仕方、ペルソナの作り方、UIデザインのための心理学に関するものなど、いずれもUXデザインのヒントにつながりそうな本ばかりだ。 U-Site編集部 2015年6月24日 安藤 昌也（あんどう まさや） 千葉工業大学 工学部 デザイン科学科教授 Ph.D。UX、エスノグラフィックデザインアプローチの研究者で、ものづくりのコンサルタント。 （← 第3回「利他的UXデザイン：人の利他心を高めるものづくり」へ） 安藤先生へのインタビューの番外編。インタビューの間、背面の書棚がとても気になったので、UXデザインを手がけるときに参考になる書籍を紹介してもらった。いずれも、UXデザインの教科

1. 各々の入力欄に、常に見えて分かりやすいラベルを付けよ 記入する前の入力欄にだけ、フォームのラベルを表示するのがWebデザインの主流になっています。これはユーザネームやパスワードなどを入力する際にはシンプルで使い勝手がいいのですが、それ以上に長い文字列になると少々勝手が悪くなります。 そのため余白があるのであれば、ラベルを表示すべきです 特に、長いフォームの場合では、ユーザは入力したものを見直すでしょう。どのラベルが入力欄と合致するのか分からなければ、間違いがないよう見直すことなどできるはずがありません。 改善前:入力欄中にラベルが記入してあります。今は見やすいかもしれません。 しかしフォームに入力するとラベルが見えなくなってしまい、間違いを見つけにくくなってしまいます。 改善後:それぞれの入力欄に、クリアでいつでも見えるラベルを付けましょう。 2. 十分な大きさのフォントを使用せよ

UIデザインに特化したプロダクションは日本だとまだ珍しい。そんな中で注目されるのが「STANDARD inc」だ。彼らが掲げる「社会における課題を解決するためのデザインの本質」とは？代表の鈴木健一さんに立ち上げの背景、デザインの本質に迫るに対する考え方を伺った。 「デザイン」がビジネス戦略の核となる時代 革新的なUIデザインなどでも話題になった「SmartNews」だが、そのウォークスルーとコーチマーク（操作性ガイド）のデザイン等を手がけたのが「STANDARD inc（スタンダード）」だ。UIデザインに特化したプロダクションとして設立。UI専門家集団として注目を集めている。 SmartNews Walkthrough & Coachmark 日本でもユニクロやセブン＆アイなど大企業においてデザイナーやクリエイティブディレクターが顧問・相談役を務めるケースが増加。海外では、世界大手のコンサ

クックパッド検索・編成部の須藤耕平です。 昨年の夏に担当した、PCサイトのトップページリニューアルに引き続き、今年の２月にスマートフォンサイトのトップページをリニューアルしました。 前バージョンのスマートフォンサイトは、設計時から約１年半が経過していたため、コンテンツが増えた現在では全体的にかなり煩雑になっていたこと、また、PCサイトでの成功事例をスマートフォンサイトにも取り込むことを主眼として取り組んだリニューアルでした。 本エントリーでは、今回のリニューアルにあたって、主にデザイン的な面で工夫した点、及び、それにまつわる苦労話を、具体的な事例と合わせて紹介したいと思います。 PC版をそのまま移植したらものスゴイ長いページになった 今回のケースでは前述のPCの事例が先行してあり、結果も概ね良好であったため、当初は特にコンテンツを絞らず、PC版とほぼ同内容を移植する形で進めていたのですが、

スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景

GMOサイバーセキュリティ byイエラエ（旧オハコ）は、サービスデザインやUX/UIデザインを中心に、企画、設計、デザイン、開発、運用、グロースとワンストップでお客様のパートナーとして伴走いたします。また、デザインだけでなく、ビジネスとテクノロジーのプロフェッショナルによるチームがお客様とワンチームとなり、事業成果にコミットいたします。

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

オンボーディングのUXデザインの参考になる海外Webサイト 「オンボーディング」とは、初めてサービスや製品を使うユーザーがヘルプや説明書を読まなくても使っていくうちに操作方法がわかるように設計する手法のことです。 いかに素晴らしいプロダクトであっても、初めて使用するユーザーにストレスを与えてしまい、すぐにアンインストールされてしまっては意味がありません。 オンボーディングのUXデザインで参考にしたいのが、以下の2つのWebサイトです。 アプリデザインまとめ①　User Onboarding 「User Onboarding」は海外のアプリや有名Webサービスのオンボーディングについて紹介しているWebサイト。 オンボーディングを画面単位で切り分けて、参考になる点と改善が必要な点をピックアップしています。 サンプルはスライド形式で表示されます。簡単な英語で解説されているので、英語が苦手な人で

入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル

Written by Yasir Jawaid• May 5, 2014• 9:23 pm• Inspiration • 7 Comments 55 Amazing Mobile App UI Designs with Ultimate User Experience Beautiful, modern Mobile app UI design is right here. In this roundup we’re sharing 55 amazing mobile app UI designs with ultimate User experience. This showcase only have professionally designed mobile apps iPhone, iPad, Android, UI Patterns. Every year mobile and

「フラットデザインはUIを進化させるか」では、フラットデザインの特徴を述べると同時に、これからUIが進んでいくであろうモードレスデザインとの関係について触れました。 今回はその裏にある、UIデザインの本質的な要素の捉え方について、メタファとイディオムという観点から掘り下げてみます。またそこから導かれる、開発プロジェクトにおけるUIデザインの位置づけについても考えてみます。 スキュアモーフィック → フラット フラットデザインと呼ばれる平面的で抽象的なUIのビジュアル表現は、装飾的で写実的なスキュアモーフィックデザイン（現実の物の形や質感を模した表現）に対するカウンターとして注目されています。 つまり、「スキュアモーフィックからフラットへ」というトレンドの変化です。 フラットデザインは、単に見た目に新鮮であるだけでなく、UIオブジェクトから例えばドロップシャドウ、テクスチャ、境界線といった装

ユーザーインタフェース（UI）をテーマにしたイベント「Android Usability Seminar 2012」（主催、日経BP ITpro Android Application Award 2012事務局）が2012年1月28日、都内で開催された。Suica改札機を手がけた山中俊治氏、携帯電話やiPhoneの日本語入力システムを開発した増井俊之氏、医療など様々な領域で「デザイン思考（Design Thinking）」に基づくプロジェクトに関わっている奥出直人氏ら著名な講師が、実プロジェクトに基づきUIの本質的な問題についての議論を展開した。 ユーザビリティ調査が作るUI、Appleの常識外れなデザイン 山中俊治氏 山中俊治氏はLEADING EDGE DESIGN代表として様々なプロダクトデザインにかかわるとともに、慶應義塾大学大学院で教授として教鞭もとっている。東京大学工学部の在

iOS/MacOS開発者のためのUIデータベースを見つけたので情報をシェア。 「Cocoa Controls」は、カスタムコンポーネントとして作ったUIを投稿してシェアできるようになっています。 全てソース付きのようですので、自分のアプリの中に組み込む事も可能ですよ。 以下にいくつか気になったものをご紹介。 Center Button in Tab Bar for iOS ↑タブバーのセンターボタンを大きくするコンポーネント Pull-to-Refresh TableView for iOS ↑Twitterのように、画面を引っ張るとテーブルビューをリフレッシュする事ができます。 WEPopover for iOS ↑ポップオーバーの実装 JSLockScreen for iOS ↑OSのロック画面の機能を持ったIOSのUIコンポーネント。 HGPageScrollView for iOS