Curated collection of A/B test results from best-in-class apps Powered by
Curated collection of A/B test results from best-in-class apps Powered by
グリッドビューはEC系のアプリでよく使われる手法ですが、これには何か理由があるのでしょうか？ シンプルなリストビューよりグリッドビューの方が成果が上がるのは、どのような場合でしょうか？ この記事では、グリッドビューについて細かく見ていきつつ、双方の問いに対しての答えも探っていきたいと思います。 グリッドビューとは グリッドビューとは、標準のリストビューに代わる、コンテンツの表示手法です。グリッドビューは水平方向と垂直方向の両方に、２つ以上のセルを配列することで成立します。 グリッドリストは垂直、水平の両方向に配列されたセルの繰り返しで構成されます タイルの中身 グリッドビューは多くの情報を入れるように作られておらず、多くの場合ユーザーが目にするのは商品のイメージや名前、価格のみです。 上記はグリッドのセルとタイルの一例です。写真はセルの大半を占めており、文字は極力折り返さなくてもいいように
Design Beautiful Websites Quickly Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. Concise HTML Semantic UI treats words and classes as exchangeable concepts. Classes use syntax from natural languages like noun/modifier relationships, word order, and plurality to link concepts intuitively. Get the same benefits as BEM or SMACSS, but wit
世に出ている「デザイン原則」と呼ばれるものたちをまとめてみました。 ユーザビリティ関連からモバイルUX、サービスデザインにいたるまで、広い範囲のデザイン原則を網羅したつもりです。ただし、チェックリスト的にまとめたため、内容の詳細は記述していません。 出典や内容を紹介している外部リンクを張っておきましたので、詳細を確認したい方はそちらをご参照いただければと思います。 なお、この記事は有用なデザイン原則を見つけ次第、随時更新していきます。 更新履歴 2018/10/01： 「アクセシビリティの4原則」「Material Designの原則」「Android TV デザイン原則」「インクルーシブデザインの原則」を追加 2016/12/28： 「Microsoft デザイン原則」を「Windows UX デザイン原則」にアップデート 「Apple Watch デザイン原則」を追加 2015/10/
Ryutaro Mori TwitterでGHJをフォロー！ FacebookでGHJをフォロー！ NEW スタートアップに欠かせない6種類の人間 検索エンジン大手グーグルが、スマホサイト最適化に関する大規模なリサーチを行いました。 その結果から導き出した「スマホサイト最適化25のルール」は、モバイル時代、特にtoCビジネスには欠かせない内容です。 調査に関して 本調査は、GoogleとAnswerLabの共同指揮の下に行われました。 モバイルサイトにとって最良のデザイン慣行を提言することを目的に行われた本調査は、以下の方法論で実行されています。 ・シカゴ・サンフランシスコにて、119時間のユーザービリティテストを敢行 ・iOS・Android両方を含むユーザーに調査を実施 ・ユーザーは、商品の購入、価格の調査、予約など、コンバージョンに関連するタスクを実行し、各サイトのユーザービリティを
Resources by Application Bootstrap Templates Figma Templates Flyer Templates Illustrator Templates InDesign Templates Lightroom Presets Logo Templates Logo Fonts Mockup Templates Photoshop Actions Photoshop Brushes Resume Templates Tailwind CSS UI Kits Web Templates Video & Motion Design Templates All Motion Design After Effects Apple Motion DaVinci Resolve Final Cut Pro Premiere Pro Presentation
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 初めまして。社長室でUI/UXディレクターをしている渡辺（@mw19830720）と申します。現在は主にUI/UX視点でのAmebaスマホののクオリティ管理を担当しています。 普段ディレクターが本ブログで執筆することはあまりないと思いますので、今回はいつもと少し雰囲気を変えて、「サービス立ち上げ時におけるUI設計やディレクションの質を高めるポイント」というテーマで、あえて盲点になっているかもしれないと感じている点をまとめてみました。 まずは画面設計のフェーズにおいて2点ほど。 仕様書全体を都度見返す 画面仕様書の作成には数日～長くて数週間程度かかると
デスクトップやスマフォやタブレット向けのページやアプリのユーザインターフェイスには、多種多様なアニメーションが使用されています。 ユーザーの助けになるよう目的にあった有意義なアニメーションを実装できるよう、ユーザーのインタラクションにフォーカスを合わせカテゴリに分けたMeaningful Transitionsを紹介します。 Meaningful Transitions アニメーションは、目的ごとに6つのカテゴリに分けられています。 下記に、6種類のアニメーションのカテゴリと事例をいくつか紹介します。 Orientation Spatial Extension Awaking Controls Highlight Feedback Feedforward Orientation オリエンテーションは表示されているオブジェクトから別のオブジェクトを表示するもので、スクロール、ポップアップ、ス
posted on 2012.12.09 18:52 0 trackbacks モデレーターの馮です。こんにちは。 2012年最後となる，第31回WebSig会議「創り手が意識すべきタブレット，ユーザが使い始めるタブレット」が2012年12月1日，株式会社ミクシィさんのセミナールームで開催されました。 タブレットについてさまざまな視点で捉え，考えた1日 Windows 8のリリース，秋口から続く各種タブレット端末のリリースなど，スマートフォンに加えて，スマートタブレットへの意識が高まる時代になってきました。今回は，来るべくタブレット時代に向けて，私たちWeb制作者・Web開発者たちがどうあるべきか，さまざまな視点から考え，最後にグループワークで参加者全員による意識共有をしました。 オープニングセッション：タブレットの現状 今回のWebSig会議の起点は「タブレットが増えてきてはいるものの，
U-NOTE サイト閉鎖のお知らせ 長らくのご利用、誠にありがとうございました。 当サイトは2024年12月31日をもちまして閉鎖いたしました。 これまでのご支援に心より感謝申し上げます。
iOS向けのテストツール（主にUIテスト）を探していたところ、Calabash-iOSがすごくいいという記事を見つけました。 VOYAGE GROUP エンジニアブログ : iOSの究極テストツール:Calabash-iOSを使いこなすぞ！(1) VOYAGE GROUP エンジニアブログ : iOSの究極テストツール:Calabash-iOSを使いこなすぞ！(2) Calabash-iOSとは Calabash-iOSはオープンソース（Eclipse Public License 1.0）のBDD系UIテストフレームワークです。Calabash-iOSのREADMEを見てみると、「AndroidとiOSのネイティブとハイブリッドアプリケーションのための自動テスト技術です」と書かれています。しかも上で紹介した記事で書かれている通り、シミュレータと実機の両方でテストが実行できるとのことです。
こんにちは。ライターの内藤です。 恥ずかしながら、最近になって「フラットデザイン」を意識しはじめました。 装飾を最小限におさえることによって、特定のメッセージや製品、アイデアを直球勝負で伝えるデザイン。 フラットデザインは、もともとスマートフォンの小さな画面でシンプルに見せるものから派生したのだと思われますが、Windows8やGoogleの新デザインがきっかけとなって一躍注目を浴びるようになったようです。 もう知っている方も、まだ知らない方もいらっしゃると思いますので、目次のお好きなところから読んでください。 最初から全部読まなくても大丈夫です！ フラットデザインとは まずはどんなものか、百聞は一見にしかず、サンプルを見てみましょう。 フラットデザインの例 http://builtbybuffalo.com/ http://www.squarespace.com/templates/ ※
New here? Please allow us to introduce ourselves.Welcome to BBC UX&D. We do the layer between people and technology. Every day, we focus on the stuff that makes things special, as well as the stuff that makes things happen. The Futures Bazaar: A Public Imagination ToolkitExpand horizons, explore new ideas, and transform everyday objects into things from the future. Download your toolkit here.
2013-04-13 CSS Nite ＠Co-Edo, Vol.8「UIデザインのパターン化」に行ってきたよ 4月4日に行われたCSS Nite ＠Co-Edo, Vol.8「UIデザインのパターン化」に行ってきました。この前ここにも書いたCSS Nite LP26のCSSプリプロセッサの回で、クックパッドの@tikedaさんのお話をもっと聞いてみたいなーと思っていたので、これは！！と思い。テーマは「UIデザインのパターン化」。ちょうど「スマートフォンのためのUIデザイン ユーザー体験に大切なルールとパターン」という本を出されたばかりだったので、本から抜粋された内容が紹介されました。以下Agenda。 UIのパターン化・ルール化とは プラットフォームの流儀 画面パターン UIコンポーネント 実践事例 パターンとルールがもたらすメリット 90分という短い時間だったけど、ワークショップ的なの
スマートフォンやタブレットなどのモバイルデバイス向けにUIをデザインする際には、タッチ操作に適したコントロール表現を追求しなければいけません。 タッチ操作に適したコントロール表現とは、前回書いたジェスチャもありますが、それ以前に、ボタンやリンクなどのUI要素を指で押しやすい大きさにすることが大切です。 パソコン画面のマウスポインターと違って、タッチスクリーンにおいて指でボタンをタップする場合、指がそのボタンを覆い隠してしまうので、意図した場所に正しく触れているのか分かりにくく、またボタン自体の視覚的なフィードバックも確認しづらいという課題があります。 またマウスポインターではピクセルレベルで画面上の座標を指し示すことができますが、指先ではそのような細かい操作はできません。 ですからタッチデバイスでは、ボタンやリンクが細かく密集しているようなデザインは大きなストレスになります。 最低限の大き
どーも、Fum-i(@fmoooon)です(´ω`)b (その3)いってみよーう (その3)ボタンを選ぶか、ジェスチャーを選ぶか UI(ユーザーインターフェイス)について 先日サポートページにてこんなコメントをいただきました。 この人が言うには、 シンプルなUI ＝ 一目見て何がどうなっているかわかるUI ということらしいですが、 この考えが間違っていることは、「Clear」という有名なアプリで証明できます。 ↑のスクリーンショットはClearの画面ですが、 シンプルすぎると言えるくらいシンプルなUIですよね。 しかし、初見で一目見て何がどうなっているかわかると思いますか？ あるいは、どうやって操作するのかすぐにわかると思いますか？ 初見でわかる人はほとんどいないと思います。 「一目見て何がどうなっているかわかるUI」というのは 文字や絵がかかれた「ボタン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
