タグ

uiに関するbaby-babyのブックマーク (7)

  • キャンセルボタンに色をつけてはいけない理由

    キャンセルボタンをデザインする時に、カラーで悩むことはありませんか? キャンセルボタンに色をつけてはいけない理由、ニュートラルなグレーが適している理由を紹介します。 キャンセルボタンのデザインがアクションボタンと同じだと、ユーザーは迷ってしまいます。キャンセルできることを明確にすることで、認知速度が上がります。また、ボタンが3個以上だったり、ラベルが違っていると、ユーザーは余計に戸惑います。 Why Cancel Buttons Should Never Have a Color by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 キャンセルボタンに色をつけてはいけない理由 ニュートラルボタンのためのニュートラルカラー キャンセルに適したラベルとは グレーを使う時は十分に暗くする キャンセルボタンはニュ

    キャンセルボタンに色をつけてはいけない理由
  • 課金 UI まとめてみた|あき - 良いもの作って正しく届ける

    売上を伸ばしたい。 課金率を伸ばしたい。 でも、難しい! コンバージョンするサブスク UI を勉強したかったので、いくつかのアプリをスクショ。あたまの整理にまとめたのでアップ。 Web の LPO はかなりノウハウ系記事がありますが、アプリのサブスク UI は、まだまだ少ない気がします。誰かの参考になれば嬉しいです。 まとめ内のコメントは個人的感想です。まだまだ勉強中なので、お気軽にご意見いただけるとうれしいです。 ※ スクショは少し前に撮影したものなので、一部古くなってるかもしれません。 UI パターン 1. ミニマム型 2. プラン比較型 3. 横スクロール型 4. リスト型 5. ロング LP 型 規約表示パターン 1. 固定表示型 2. 隠しスクロール型 3. フッター型 4. 遷移型 サービスパターン 1. 探索財 2. 経験財 3. 信頼材 UI パターン1. ミニマム型最低限

    課金 UI まとめてみた|あき - 良いもの作って正しく届ける
  • 現役UIデザイナーが語る「今、プロトタイピング開発に求められること」UI Crunch #3

    現役UIデザイナーが語る「今、プロトタイピング開発に求められること」UI Crunch #3 馬場 美由紀(HTML5 Experts.jp編集部) この1~2年、Webサービスやスマートフォンアプリの開発現場では、早い段階から評価・検証により課題を洗い出し、制作の効率化を図るプロトタイピングがさまざまな手法・ツールによって試されている。 「UI Crunch」第3回となる今回のテーマは、「今、プロトタイピング開発に求められること」。講座は、元山和之氏(クックパッド)、吉竹遼氏(Standard Inc.)、村越悟氏(グリー)、土屋尚史氏(Goodpatch CEO)デザイナー各氏によるスピーチ、および坪田朋氏(DeNA)を加えたパネルディスカッションを通じて考え、深めていくという構成で行われた。 チーム開発におけるKeynoteを使ったプロトタイピング 最初のセッションは、クックパッド

    現役UIデザイナーが語る「今、プロトタイピング開発に求められること」UI Crunch #3
  • ≡ ←ハンバーガーメニューのデザインでクリック率は違う(2014年のA/Bテストの結果から)

    スマートフォン対応サイトで右上や左上にある「≡」こんな形の三線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。 ●ハンバーガーメニューのデザインパターンハンバーガーメニューは色々なデザインがあって、例えば以下の様なパターンがあります。(サイトイメージは「グラシン工房」から) まずはBootstrapの標準に近い形式。三の線があるだけのパターン。 次に三の線のしたにメニューという文字を配置して、アイコンの意味を説明するパターン。 三線を線(border)で囲い、ボタンらしく見せるデザインのパターン。 他にもいくつかデザイン・表現方法がありますが、それは前に書いた「【Web制作】スマートフォンサイトのメニューのアイコンデザイン・表示を比べてみた」の記事をご覧ください。 ●アイコンだけ・文字付

    ≡ ←ハンバーガーメニューのデザインでクリック率は違う(2014年のA/Bテストの結果から)
  • U-site

    日記調査:長期間のユーザー行動と体験の理解 ニールセン博士のAlertbox 8月9日 読了までに約15分 参加者は日々の活動をその都度記録し、リアルタイムのユーザーの行動やニーズについてコンテキストに基づいた知見を提供する。 このサイトについて UXリサーチや市場調査の手法やコツ、結果や知見を紹介しています。 詳細 新記事公開は、Twitter・Facebook・RSSで随時、メルマガで月1回通知します。 Twitter Facebook RSS メルマガ YouTube、始めました 黒須教授のユーザ工学講義 7月25日 読了までに約5分 2024年5月にYouTubeチャンネルを開設し、そこで「黒須のユーザ工学入門」を連載することにした。講演や講義とは違ってもっとオープンにして、広い範囲の人たちに話を届けたいという気持ちがあったのだ。

    U-site
  • Webアプリケーションの画面をさくさく作ろう。UIフレームワーク特集 MOONGIFT

    今回はWebアプリケーションの画面作成に関する話です。かつて業務システムというのはエンジニア自身が画面を作ってロジックを実装して提供していました。UIがただコンポーネントを貼付ける程度だったからです。 しかしWebアプリケーションの時代になって、UIの制作が難しくなってきています。デザインの自由度が高いためです。しかし今後さらにWebアプリケーションが活用されていく中ではエンジニアもそれなりの画面を素早く開発できるようになっていかないといけない時代になっています。 そこで今回はUIフレームワーク、多彩なコンポーネントを備えたデザインフレームワークをまとめて紹介します。 iPhone/Android/Windows Phone対応のモバイルWebアプリフレームワーク「ChocolateChip」 モバイルWebサイトをネイティブ風にするUIライブラリは昔から多数存在しますが、今回はその最新版

    Webアプリケーションの画面をさくさく作ろう。UIフレームワーク特集 MOONGIFT
  • UX/UIデザインガイドライン : 小野和俊のブログ

    このところ、アプレッソの中でも、MIJS製品技術委員会でも、自分たちのソフトウェアのUX/UIをブラッシュアップしていくためにどんなことができるのかをディスカッションしている。 UX/UIデザインガイドラインとして各社の推奨する指針をまとめたものがWebで公開されているので、プログラマーであれデザイナーであれ、ソフトウェアの画面設計に何らかの形で携わるのであれば、基礎知識として主要なものには目を通し、プログラマーがデザインパターンの用語で手短にコミュニケーションが取れるのと同じように、「ここは○○ガイドラインの△△パターンを使うのはどうかな?」というような会話ができるようにしていきたいと思っている。 ■ Apple ・アップル ヒューマンインターフェースガイドライン ・iOSヒューマンインターフェースガイドライン(PDF) ・iPadヒューマンインターフェースガイドライン(PDF) ■ M

    UX/UIデザインガイドライン : 小野和俊のブログ
  • 1