ユーザーが見落とすことがない入力フィールドを作るには
UX Movementの著者および創設者。ユーザー体験においてのデザインのベストプラクティス、スタンダードおよびテクニックを教え、それを広めることでより良いデジタルの世界を作り上げることを目標としています。 入力フィールドは、ユーザーに情報を要求するもっとも一般的なインターフェイスの要素です。入力フィールドにはさまざまなサイズや形状、スタイルがあります。そのような選択肢がある中で、最適なユーザビリティを提供するには、どのように表示すればいいでしょうか？ 強い視覚的な手がかり 最適な表示方法は、入力フィールドの機能と、ユーザーがどのように操作するのかによって決まります。つまり、入力フィールドには、ユーザーが何をすべきか示す強い視覚的な手がかりが必要です。 入力フィールドは、インターフェイスにテキストを入力するために存在します。したがって、ユーザーが視認したらすぐに行動を起こせるように、入力フ
ゲーム系UIデザイナーの勉強を２年近くやって思った12のこと。 - meycoのUX&UIデザイン技術メモ
あけましておめでとうございます。 新年になり、すこしゆったりとした時間を過ごす事ができました。せっかくなので、去年からずっと思っていたUIデザイナーについて思った頭の中のことをまとめたいと思います。 WEBのUI設計よりも、明らかにゲームの方が難しい これは結構何度も言ってますが、ゲームの設計(ゲーミフィケーションのアプリ含む)の方が明らかに「やることが多い」です。 もっとプレイしてもらうには？ゲームが終わったときに、どのような設計になればもう一度やってくれる？ チュートリアルは必要？やりこみ要素はどうする？ソーシャルとどうやって連携する？ポイント加算の条件は？アクショナブルフィードバックは？日常で使ってくれるような設計には何が必要？盛り込みすぎではないか？ などなど、考えることが多いです。 このあたりは、ソーシャルゲームが本当に上手にできてるなーと思っているので、日々勉強しています。 ゲ
世界一うざい「ページTOPへ戻る」が実装されました。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGの副社長、ゴウです。 この度、LIGブログに「ページTOPに戻る」機能が実装されました。 どのサイトにでもある、普通の要素だと思うのですが、今回、我々は“ウザさ”にこだわって作ってみました。 ページ右下にある弊社エンジニアの段田をクリックすると… ゴゴゴゴゴ… ドドドドドドドド… という感じで、段田が天に登るラピュタのように上昇していきます。 俺が知る限り、ここまでうざったい「ページTOPに戻る」は無いと思いますし、今回の開発にはデザインとJSの実装で4日ほどかかっており、「うざい」という以外に感想が無いような機能の実装に大切な会社のリソースを割いてしまった事をこの場を借りてお詫び申し上げます。 とは言え、この機能の一番下に、広告領域も設けてあります。 時間にして2秒ほどしか見えない上に、クリックをするにはそれなりの慣れと反射神経を必要とするのですが、今回特別にこの広告枠
Webとは一味違うスマホアプリの動的UI設計は、「脱・ワイヤーフレーム思考」で【えふしん】 - エンジニアtype | 転職type
Twitterクライアント『モバツイ』開発者であり、2012年11月に想創社（version2）を設立した有名エンジニア・えふしん氏が、変化の激しいネットベンチャーやWeb業界の中で生き残っていくエンジニアの特徴を独自の視点で分析 えふしんのWebサービスサバイバル術 藤川真一（えふしん）氏 FA装置メーカー、Web制作のベンチャーを経て、2006年にpaperboy&co.へ。ショッピングモールサービスにプロデューサーとして携わるかたわら、2007年からモバイル端末向けのTwitterウェブサービス型クライアント『モバツイ』の開発・運営を個人で開始。2010年、想創社（現・マインドスコープ）を設立し、2012年4月30日まで代表取締役社長を務める。その後しばらくフリーランスエンジニアとして活躍し、2012年11月6日に想創社（version2）設立 アメリカのiPhoneアプリはなぜクー
自動送りカルーセルとアコーディオンは、ユーザーをいらつかせ、可視性を下げる
ユーザーの目的の内容は、ページの先頭に98ポイントの文字で書かれていた。しかし、彼女はそれを見つけられなかった。そのパネルが静止しておらず、自動送りされていたからである。 Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility by Jakob Nielsen on January 19, 2013 日本語版2013年2月4日公開 先日、イギリスでユーザビリティ調査を実施したのだが、そこで、あるユーザーが「Siemensは洗濯機のキャンペーンをしているか」というタスクを行おうとしていた。 そのユーザーはさして苦労もせず、イギリスのSiemens Appliancesのこのホームページにはたどり着いた： Siemens Appliancesのホームページ どうだろう、そのユーザーは先ほどの課題に答え
10代のユーザビリティ： ティーン向けWebサイトのデザイン
ティーンは、自分のウェブを扱う能力に（過剰に）自信を持っているが、彼らのパフォーマンスは大人に劣る。読解レベルの低さや、忍耐力のなさ、発展途上の情報収集スキルにより、ティーンのタスク成功率は低くなる。そのため、サイトはシンプルで共感しやすいものにする必要がある。 Teenage Usability: Designing Teen-Targeted Websites by Jakob Nielsen on February 4, 2013 日本語版2013年2月18日公開 ティーンはインターネットにつながっている。テクノロジーがティーンエイジャーの生活に深く溶け込んでいるため、彼らに役立つ、ユーザブルなウェブサイトを作り出すことがこれまで以上に重要になってきている。次善のものがクリックするだけで手に入り、SMSメッセージによる割り込みが例外ではなく普通のことである世界で成功するには、ウェブサ
無料でダウンロードできる洗練されたデザインのUIキットいろいろ
わかりやすく、統一感のあるウェブサイトをデザインする時にあると便利なのがUIキットですが、ウェブ開発・デザインに関する情報やコンテンツを扱うブログBest Open Source Resourcesがそんな美しいデザインのUIキットをリスト化しています。明るいグレーやダークなカラー・木目調など、さまざまなパターンのPSDファイルが無料でダウンロードできるため、頭の中のイメージに合わせてコンテンツを選ぶことが可能です。 A Comprehensive Collection of Free UI Kits & Templates | Web Resources | WebAppers http://www.webappers.com/2012/11/12/a-comprehensive-collection-of-free-ui-kits-templates/ ◆01："Pizza" UI K
シリコンバレーで聞いたデザインが美しいWebサービス／アプリ15選 - パパパパ
このブログは、僕がこれまでWebサービスをいくつか作ってきて、失敗したり成功したり色々体験していることをまとめています。 シリコンバレーに来て45日が経ちました。今日はいつもと趣向を変えて、こちらで聞いた、デザインやUI/UXが美しいWebサービスやアプリの一部を紹介してみたいと思います。 Chill http://chill.com/ デザインのイケてるサービスを聞くと、かなりの確率でこのサービスの名前が挙がりました。動画の上に投稿者のプロフィール画像が円形に表示されているのが素敵です。詳細ページの「Thoughts?」ボタンの動きが秀逸。色々参考になるサイトだと思います。 ChillのようにPinterest風デザインは、今まさにトレンドのようで、教えてもらったサイトの中でも本家に負けず劣らずのデザイン性を持ったサービスも多いです。女性ウケが良いことと、画像をファーストビューでたくさん
クックパッド 片山育美さん／UIデザイナーとしてユーザーが幸せになるものだけを作りたい【連載：ワーキングビューティー・アルバム Vol.11】 - Woman type[ウーマンタイプ] | 女の転職type
クックパッド株式会社 サービスデザイン部 UIデザイナー 片山 育美さん 美大で情報デザインを専攻し卒業。2011年に新卒でエンジニアとしてクックパッドに入社。同年8月よりUIデザイナーとして活躍。 今回紹介するワーキングビューティーは、株式会社クックパッドのUIデザイナー、片山育美さん。入社２年目にして新規事業の『やさい便』をはじめ、数多くのサービス開発に携わっている彼女。あまり聞きなれないUIデザイナーの仕事内容から、揺らがない仕事軸、そして根っからのエンジニア魂を感じられるプライベートに迫る！ 入社当初はまったく知らなかった 「UIデザイナー」の仕事 編集部：いまのお仕事は「UIデザイナー」ということですが、どのようなお仕事なのですか？ UIとは「User Interface（ユーザーインターフェース）」の略で、仕事を簡単に説明すると、ユーザーがインターネットサイトの画面を使いやすく
![クックパッド 片山育美さん／UIデザイナーとしてユーザーが幸せになるものだけを作りたい【連載：ワーキングビューティー・アルバム Vol.11】 - Woman type[ウーマンタイプ] | 女の転職type](https://cdn-ak-scissors.b.st-hatena.com/image/square/b3798275ce15fec93611078875ad1c8415db2c05/height=288;version=1;width=512/https%3A%2F%2Fwoman-type.jp%2Fwt%2Ffeature%2Fwp-content%2Fuploads%2F2016%2F01%2Fog11.gif)
クリック率・コンバージョン率を高めるボタン。3つの大きなポイント
WEBサイトを運営していれば、サイトに訪れてくれたユーザーに【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、たくさん起こして欲しいと考えると思います。 そのためWebクリエイターは、どうしたらコンバージョン率や数が高まるのかを日々考え・テストを繰り返しています。 私もそのことを考えている1人として、今回はサイトの目的を達成させるために欠かすことのできない大変重要な要素の1つである【行動を呼びかけるためのボタン（Call to Action Button）】についての考えをまとめたいと思います。 目的を達成へと導くボタン ボタンはホームページの最終的な目的である【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、ユーザーに起こしてもらうためには欠かせない要素の1つです。ボタンのデザインやボタン内の文章を変えただけで、資料請求が増えたなんていう事例はたくさん存在
クックパッド流UIの作り方 - takeshi nagayama's blog
なんか突然東京行きたくなったので、ひょひょいと行ってきた。 たまたま立ち寄ったクックパッドっていう会社でクックパッド流UIの作り方という勉強会してたので、偶然持ち合わせていたはてなステッカー渡したりおいしい料理いただいたりした。 UI/UXのためのSass 池田さん / サービスデザイン部 Sass / Haml (エンジニア・デザイナー問わずに) Github デザイナーもpull req 一つのサービスを複数チームで開発 各デバイスで速いサイクルでの開発 Sassとは → ぐぐれ 全体のデザインを束ねる → デザインガイドライン ガイドライン Sassで統一的なものを提供する 画像を使わずにCSSでデザインするメリット mixinをつかって統一できる 画像編集がいらない プロパティの変更によってデザインに幅をもたせる事ができる mixinの中身は応用がきくような仕組みにしておく 検証を
「とりあえずUI直せば、どうにかなるんじゃないか病」になった話
「とりあえずUI直せば、どうにかなるんじゃないか病」が私の周りで流行している。もちろん私も何度となくかかっている。 この病気のはじまりは「目的を達成できないのはUIがいけてないせいだ！UIをとにかく今じゃない何かに変えれば問題は解決する」と思っちゃうことにある。 共通するのは、「とにかく今じゃだめなので、今じゃない何かにしたいからUI変えたい」という点。今じゃない何かにしたいのはわかるが、根拠が主観的すぎて成功する見込みがつかないのが困ったところ。 もちろん私も時にこの病気にかかり、ほんとにプロジェクトをすすめていいかどうか、どーしていいかわからず懊悩することも多々ある。というわけで、私なりに病気の定義と、自己治療法もなんとなく見つけたので、自省もこめて記録しておく。 「とりあえずUI直せばどうにかなるんじゃないか病」の主症状2点 根拠が主観的すぎて説得力がなく、社内を巻き込めない 本人が
Webユーザビリティを改善するための5つのポイントと方法
先日の記事[競合サイト調査・分析に必要なチェック項目と役立つツール達！]でユーザビリティの調査・分析方法を軽く紹介しましたが、今回はWebユーザビリティを改善するための5つのポイントと方法を紹介したいと思います。 まずユーザビリティとは何なのかについて軽く触れておきます。先日の記事でも紹介しましたが、それは【使い勝手】のことです。WEBユーザビリティの改善とはすなわち、WEBサイトの使い勝手を良くするということになります。ではその使い勝手とは何なのか。それは単純に【使いやすさの程度をあらわした言葉】のことです。使い勝手が良いということは、使った人から見てその【何か】は使いやすかったということになります。そして今回のこの記事は【どうしたらユーザーに使いやすいと感じてもらえるのか】について紹介しています。 この【WEBユーザビリティを改善するための5つのポイントと方法】は下記の項目で紹介するヤ
UXデザイナー(User Experience Designer)は本当に必要なのか？ / Maka-Veli .com
※超今更です。今更UXかよと言われそうで恥ずかしいんですが、まだまだUIとUXが混同されがちだなーというのと、じゃあUXって必要なのかよ？というモヤモヤを整理したいなと思い書きました。 UXデザインとは まず前提ですが、UX(User Experience)デザインとは、 ユーザーエクスペリエンス（UXと略記されることが多い）とは、ユーザーがある製品やシステムを使ったときに得られる経験や満足など全体を指す用語である。ウェブ上での商品販売などソフトウェアやビジネスに関連して使われることが多いが、インタラクションデザイン全般に適用される概念である。例えば自動音声応答装置は貧しいユーザーエクスペリエンスをもたらすデザインとしてよく引き合いに出される。VIA:Wikipedia と、あります。 ユーザーエクスペリエンス＝直訳するとユーザーの経験・体験と翻訳されますが、ユーザーが満足するかしな
eBay でヒドいデザインの方がコンバージョン率が高かった、という話
先日日本のWEBデザインが2003年で止まっていると話題にという記事で楽天のサイトなどのことが取り上げられていましたが、これを読んで思い出したポッドキャストインタビューがあったので一部抜粋してみます。 このインタビューはスタートアップ向けレクチャーイベント ZURBsoapbox シリーズのひとつ。昨年11月に、「サンフランシスコでの投資とギークな日々の20年間」といったタイトルで 500 Startups 代表のエンジェル投資家デイブ・マクルーア氏が語ったものです。 「チームのメンバーに求める特徴は？」という客席からの質問のデザイナーの部分について、彼はこのように答えていました。 一緒に働くのが辛いデザイナーもいた。自分はなんでも知ってる、みたいなデザイナーと働くのにはほんとに苦労した。デザイナーと口論したいわけじゃないんだ。俺が見たいのは数字とお客さんの利用例。そして何がうまくいってい
何故、エンジニアはUIのセンスがないか。
何故、エンジニアはUIのセンスがないのか、という自分にも当てはまるようなことについて書いてみる。 まずエンジニアがダメなUIを作ってしまう理由について、いくつかの仮説を立ててみる。 1.その画面を作るエンジニアは全てを知りすぎていて、もはやわからない人の気持ちがわからない説 2.エンジニアはITリテラシーは高いけど、自分ができることを人に理解できるように説明するのは下手説 3.技術的に実現する方に興味が偏って、ハナからUIの使い勝手に興味が無い説 4.国語力がない、自分が実現する文脈を表現するのはできるが、ユーザーの文脈に配慮した言葉を想像する力が無い説 5.仕様書を読まない、人の言う事を聞かない説。例えばOSが定めているユーザーインターフェースガイドラインに従わないので、UIパーツが意図した使い方をしておらず統一性に欠ける。 6.わかりやすい色や文字、レイアウトに関する知識が無い。センス
WEBシステムのデザインについて今の会社を退職する前に私が後輩に伝えたこと
このたび会社を退職することが決まり、デザインについてほとんど初心者である後輩に対して私の思考を託す時が来ました。 私自身WEBシステムの制作を手がけたことはなく（ないのかよ！！と全力でつっこんでおｋ）今度のプロジェクトでうちのチーム初のWEBシステム制作案件があるそうなので、デザインする時のポイントなどを自分なりにまとめてみました。 私は携われないんですけどね＼(^o^)／ 様々なWEBシステムのデザイン よいデザインはデザインをする対象（今回はWEBシステム）のことを知らなければ出来ません。 自分の考えだけでデザインをはじめると、思考の偏った使いにく～いものになってしまう恐れがありますので 必ず調査をしましょう。 そして、何故その要素がそこに配置されているのかを考えましょう。 以下に様々なWEBシステムのキャプチャと 超稚拙で言葉足らずな安易すぎる説明を掲載します。 ですが、掲載されてい
もうユーザーを迷わせない！ナビゲーションメニュー設置のコツ
2013年11月22日 Webサイト制作, ユーザビリティ どのWebサイトにも必ずあるのがナビゲーションメニュー。各コンテンツページへリンクされている「Webサイトの目次」です。この目次をきちんと設置していないと、ユーザーは欲しい情報が見つけられず、離脱率が高くなります。そのサイトでしか手に入らない、本当に必要な情報でない限り、こちらから案内しないとユーザーはコンテンツを探そうとしません。そんなナビゲーションメニューについて考えてみましょう。 ↑私が10年以上利用している会計ソフト！ ナビゲーションメニューの設置ポイント すべてのページに 基本中の基本ですが、メインのナビゲーションメニューはどのページにも同じ場所に設置しましょう。ホームページでしか表示されない…なんてことがないように。というのも、ユーザーが最初にたどり着くのが必ずしもホームページとは限らないからです。検索で特定のコンテン
高品質な UI や Web のデザインが短時間で作れるおススメの Fireworks 拡張機能 4つ
こんにちは、イメージ担当の長谷川です。 「品質を上げれば速度が落ちるし、速度を上げれば品質が…」 デザイナーにとってはこの品質と速度が非常に悩ましいですよね。 今回は UI や Web デザインのモックアップなどを、品質を保ったままサクっとデザインするときに役立つ Fireworks の拡張機能をご紹介します。 1. 作ったデザインを崩さずにまとめて縮小できる「Smart Resize」 Web ページのデザインデータを使ってスマートフォン用など異なったサイズのデザインを作りたいときなどに最適です。 【使い方】 インストールするとコマンドに「Smart Resize」が追加されます。 サイズ調整をしたいデザインを選択して コマンド＞ Smart Resize ＞ Attach を選択します。 後は黄色のコントロールポイントでサイズを調整するだけでテキストの改行などデザインを保ったまま自動的
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UI＆UX / 重要なのは、毎日さわって嬉しい UI UX!
