入力フォームの「必須」「任意」のラベルは両方付けないとコンバージョン率が下がる
[レベル: 初〜中級] 入力フォームのフィールドには、入力が「必須」なのかまたは「任意」なのかのラベルを両方付けることが推奨されます。 どちらか片方だけだと入力途中の離脱の原因になります。 ECサイトのユーザービリティ調査と最適化を専門に扱っているBaymard Instituteが詳しく解説しています。 15の大手ECサイトのユーザビリティ調査と18の主要なモバイルサイトのユーザビリティ調査、そして自社による最新の大規模なアイトラッキングテストによって実証することができました。 この記事では、その解説の要点をまとめて紹介します。 片方だけの「必須」「任意」ラベルの問題点 入力が「必須」か「任意」かをどちらか片方のラベルだけで示すことにはさまざまな問題点があります。 必須か任意かを示さないのはいちばんよくない そのフィールドの入力が必須か任意かを示さないのはいちばんよくないスタイルです。
CEDEC 2010「torne(トルネ)のUIでこだわった19のポイント」 - ゲームの花園
CEDEC2010、3日間参加してきました。 かなりたくさんセッションを受講したので可能な限りレポートしようと思います。ただ、すでにニュースサイトではたくさんアップされているようなので、かぶらないように最初はtorneのやつから書こうと思います。 概要 PS3専用の地上デジタルレコーダーキット「torne（トルネ）」の開発の経緯の紹介 torneのコンセプト torneのUIでこだわった19のポイント 技術面から見たtorne 公式サイト CEDEC2010:torne(トルネ)に注ぎ込まれたゲーム制作現場のノウハウ コンセプト:Torneと家電の違い Torneは開発当時、BD/DVDに焼けない、CS/BS/短波が映らない、録画モードが標準しかない、撮った映像を編集出来ないなど欠点があった。 →そこでTorneでしか体験出来ない、スペックに頼らないモノづくりの追求 家電製品 torne(
FacebookのニュースアプリPaperのUIと、その背後に見える戦略について | fladdict
Introducing Paper from Facebook on Vimeo. FacebookがリリースしたニュースアプリPaper、さっそくダウンロードして触ってみた。 使ってみた第一印象は、「意欲的な実験作だが、まだ実用品ではない」といった感じだ。 外見や手触りが注目されるPaperだが、しかし僕自身が一番注目しているのは右上のナビゲーションだ。Paperの右上は、「人」「会話」「通知」 というFacebookの基幹アプリとまったく同じ構成なのである。そしてFacebookの同機能にアクセスする。つまり、Paperはニュースアプリの形をしているが、本質的にはFacebookクライアントなのだ。 これは。何を意味するのか・・・ つまりFacebookは今後、様々なコンセプトのFacebookクライアントを複数リリースするということだ。 右上のボタン群が主張するUI上のメッセージは、
SIGIXD 2nd Googleにおけるインタラクションデザイン - 安藤日記
安藤日記 安藤日記：デジタルガジェット好き「安藤幸央」の日々のメモ ( yukio.andoh@gmail.com ) [ http://twitter.com/yukio_andoh ] Design Sprint Newsletter https://designsprint.substack.com/ SIGIXD 2nd ------------------------------------------------------- http://sigixd.org/2nd.php Googleにおけるインタラクションデザイン ＃川島さんの示唆に富んだ話がすばらしかった。 川島 優志氏 シニアウェブマスター・アジア太平洋マネージャー: "Behind the web design & Doodle creation" Judy Shade UX Researcher: "UX at
ユーザビリティの高い、使いやすいフォームを制作するための12のポイント
Li'l Engineのエントリー「ユーザビリティフォームのためのチェックリスト」の意訳で、ユーザビリティの高いフォームを制作するための12のポイントの紹介です。 Checklist for Usability Forms 不明な箇所は英文のまま記載してましたが、皆様の協力により3,5を和文にしました。 フォームは正しく入力できるように、可能な限り簡潔に。 フォームには、必要なインフォーメーションを含める。 タイトル：なんのためのフォームか フォームのヘルプ キャンセル(中止)の選択肢 入力すべき項目は、多くしない。 重複する入力項目は設置しない。 フォームの公開後しばらくしたら、収集したデータが実際に使用されているかチェックする。利用されていないものがあれば、収集しないようにする。 長いフォームは紛らわしいので、分ける。 タスクごとに分ける それぞれのページごとにチェックをし修正すること
Webユーザインターフェースの "暗黙知" を意識していますか？ : LINE Corporation ディレクターブログ
暗黙知（あんもくち、Tacit Knowing）は、ハンガリーの哲学者・社会学者マイケル・ポランニー（Michael Polanyi) によって1966 年に提示された概念で、認知のプロセス、或は、言葉に表せる知覚に対して、（全体的・部分的に）言葉に表せない・説明できない知覚を指す。Wikipediaより こんにちは。livedoorで検索全般を担当しております、須田です。 タイトルのままなのですが、少しづつ日本のWEBにおける暗黙知を共有したいと思っています。 暗黙知の共有することで得られるメリットですが、 ユーザーにとっては、分かりづらいUIを日本からできるだけ無くすことができ、斬新なUIに慣れるという煩わしい時間からの開放企業にとっては、暗黙知として決まりがあることで、UIを検討する時間の短縮にもなるというメリットがあると思います。 まずは誰でも知っていると思われる基本的なところだけ
2010年版 ユーザーインターフェース（UI）・ユーザビリティ必見サイト/必読書 - Feel Like A Fallinstar
ウェブサイト 実はユーザー中心設計やユーザビリティ、インターフェースについてちゃんとまとまったサイトは国内には少数です。 ここに挙げたサイトはどれも大変充実したものだと思います。 ※残念ながら、海外の記事を紹介しているブログでよいものは見つからず。 劣化コピペサイトを紹介するのも気が引けるので割愛しました。 ヤコブ・ニールセンのAlert Box ユーザビリティ・ユーザ調査の世界的権威であるヤコブ・ニールセン博士のナレッジを発表しているサイトです。 実際の調査結果、そこに対する考察も含め、とてもよくまとまっています。 アップル ヒューマンインタフェースガイドライン Max OS Xのためのインターフェース資料に始まり、アプリケーションをデザインしている間、心に留めておくべき基礎となるデザイン原則がまとまっています。 もちろん、Windows / Linusユーザーにとっても必見。 ユーザビ
モバイルショッピングサイトのデータ
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
realtimeweb.jp
realtimeweb.jp 2020 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
ブラウザから簡単にワイヤーフレームを作成『Mockingbird』 | 100SHIKI
似たようなツールは他にもあるが、使いやすそうだったのでご紹介。 Mockingbirdを使えば簡単にブラウザだけでサイトのワイヤーフレームを作ることができる。 これから作りたいサイトはこんな感じ・・・といったプロトタイプをつくるときに便利だろう。 ちゃんと日本語も通るし、タグクラウドやビデオといった今風の部品も揃っている。 サイトの提案なんかをするときに便利ですな。覚えておくといいだろう。
サービス普及のためのユーザーインターフェース指向型サービス開発
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに 島津悠樹と申します。Yahoo!ブックマークのディレクションを担当しています。本エントリーでは、エンジニアのみなさまや企画担当の方を対象にサービス普及施策のヒントとなるような話題をお届けします。 「サービス普及のために何をすべきか？」 おそらくサービス関係者にとって永遠のテーマといえるこの課題に対し、ユーザーインターフェース（UI）を起点にサービスのあり方を考える方法が有効です。 特に効果的と思われるのは「アフォーダンス」と呼ばれる概念を応用した取り組みです。これより詳しくご紹介します。 アフォーダンスとは？ 認知心理学の分野から出てきたのが、デザイン業界で転じて、道具の使いやすさ実現のためのキーワードとなりました。その
nanapiを作る上で気をつけたことのまとめ : けんすう日記
ライフレシピ共有サイトの「nanapi」というものをリリースしてみました。 nanapi[ナナピ] | 7分であなたの生活を便利にしちゃうライフレシピ共有サイト おかげさまでいろいろと紹介していただいたみたいでアクセス数高くていい感じです。 今回、どのような設計にするか結構考えて作ったのでそれを公開します。 ※ここでいう設計とは、どうユーザーに動いてもらいたいか、等のコンセプトに近い意味での設計で、システム的なものではありません！ 参考にしたサイトや記事 作るにあたって参考にした記事はこちら 『Stack Overflow』から学ぶ最近のコミュニティ構築術 - IDEA*IDEA すごくよくまとまってます。コミュニティを作る人には絶対よむべき記事ですね・・・。 デザインとかインターフェイスはこのサイトを結構参考にしました。 Kickstarter シンプルで伝えたいことを伝えているなあ、と
Bridge Word
This shop will be powered by Are you the store owner? Log in here
独学で極める “Webデザイン”の技と心：第10回 CSS Spritesでサイトを高速化｜gihyo.jp … 技術評論社
今日は、CSSを使ってサイトを高速化するテクニック「CSS Sprites（CSSスプライト）」についてのお話をさせていただきます。 サイトの高速化というと、プログラムの最適化を行ったり、サーバのチューニングを行ったりというイメージがあるかと思います。実はCSSを上手に使うことによっても、サイトの高速化を行うことができます。しかも、かなりの効果が期待できるのです。 CSS Spritesとは？ 通常、ウェブページを制作する場合、デザインファイル（psdやpngなどの画像）をスライスし、HTMLのimg要素として埋め込んだり、CSSの背景画像として指定していることと思います。 それらの画像を一つにまとめ、１度の読み込みでのリクエスト数を減らすテクニックのことを「CSS Sprites」と呼びます。 このテクニックは、以前からマウスオーバーメニューを実現する際にも使われていたものでもありま
人の目を引くクリエイティブ（ビジュアル基本編） : LINE Corporation ディレクターブログ
こんにちは。livedoor でディレクターをしている有賀です。 今日のお題は、「人の目を引くクリエイティブ（ビジュアル基本編）」についてです。 前回の「ライティング編」でお話ししたように、私たちは日夜“一瞬で理解できるモノ作り”を試行錯誤しているわけですが、それとツートップとなるのが前回お話した「コピー（文字）」と、今回お話しする「ビジュアル（視覚表現）」です。 多くのユーザーは、ウェブページを見てから数秒で「見るべきものかどうか」を判断するというシビアなご時世。その数秒のほとんどは、実は、ビジュアルの印象で占められているのではないかと思います。 私もユーザーとしてサイトを見た場合、ページを開いてから一瞬で目にする構造（レイアウト）や色、形や動きなど、文字を読む前にインプットされる情報によって、多くの判断をしていることに気が付きます。 今回は、そんな「ビジュアル」についての概念を簡単にお
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bootstrapだけじゃない！マッハでフラットや美しいデザインのUIが導入できそうなワイヤーフレームやUIキット等色々！ | バンクーバーのうぇぶ屋
in the looop | Looops communications
Mobile Web Design | Best Mobile Websites | Mobile Website Gallery
使いやすさ日記: 539. 各社バラバラ！ブログのページ送り文言とルール』
ダメなユーザインタフェイス講座