Loading...
こんなにあった！シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由 | マミオン有限会社-パソコン・数学研修、法人研修
シニアがウェブサイトを利用する際の大きなハードルの一つが、各種「入力フォーム」です。 一般的にシニアの方ほど入力に時間がかかり、また不適切な入力によるエラー発生頻度も高くなることは、ユーザビリティ業界の権威であるニールセンノーマングループのレポートも統計データを用いて指摘しています。 シニアをターゲットとしたウェブサイトの多くはこうした状況を考慮して、入力フォームのシニア対応に力を入れているところが多いのですが、その中でも私個人から見て特に完成度が高いと感じているのが、健康食品の『皇潤』で有名なエバーライフです。 今回、そのエバーライフの入力フォームで実装されている様々なシニア対応施策について、実装方法まで含めて詳しくご紹介していこうと思います。 1. 各フォームがそこそこ大きく見やすい 2. 必須項目表示がわかりやすい 3. ふりがなが自動的に入力される 4. 住所が自動的に入力される
DISられないUIを作るために最低限守るべき5つの鉄則 - たごもりすメモ
ぼくらが迂闊にUIを作ると、そこにはユーザの正直な目線があり、非常に様々な、そして真っ当な反応がある。 曰く「わからん」「まさかそこをクリックするとは」「不思議な動作」「独自宇宙」「モリスUI」。 反応がもらえるのは非常に良いことだが、何度も何度も繰り返しているとつらくなってくるので、できれば避けたい。分かっている(いた)ことは最初から対応しておきたいものだ。*1 ということで、ここではブラウザで操作する管理画面等のWebUIを作るとき、真っ先に心得ておくべき5つの鉄則を紹介したい。これを守っていてもDISられなくなるというわけではないが、これを守らないと間違いなくDISられるので注意しよう。 なおこの記事ではオリジナリティというものについては考慮しない。オリジナリティとか犬に食わせろ。 クリックできる場所はcursor:pointerを指定しろ これを忘れるとこの世のものとは思えないくら
情報がないことを伝えるUIデザイン | UXデザイン会社Standardのブログ
「Empty Data（またはEmpty Status）」というUIパターンがあります。タイムラインやドロワーなどデザイナーであれば知っているUIパターンの名称に比べると、あまり日本では聞き慣れないのかもしれません。Empty Dataは簡単に言うとデータがない時のUIになります（Webでの404に近いですが、少し違います）。では、Empty Dataを知るためにもう少し詳しく紹介していきたいと思います。 参考：モバイルデザインパターン 第2版 ―ユーザーインタフェースのためのパターン集 Empty DataはUIである Empty Dataはただユーザにデータがないことを示すだけではありません。ユーザにデータが存在しないという情報をフィードバックし、どうしたらここに情報が入るかのアクションに繋げる立派なUIです。もしEmpty DataのUIが存在しなかったらユーザはどのように感じるでし
ビジネス向けモバイルアプリケーションのUIガイドライン、セールスフォース・ドットコムが公開。アイコンなどダウンロード可能
ビジネス向けモバイルアプリケーションのUIガイドライン、セールスフォース・ドットコムが公開。アイコンなどダウンロード可能 先週13日に、SAPが業務アプリ用のJavaScript製UIライブラリ「OpenUI5」を公開したとお伝えしたばかりですが、今度は、米セールスフォース・ドットコムがHTML5でのビジネス向けモバイルアプリケーションのUIガイドラインやサンプルを多数公開しました。ビジネスアプリ用のモバイル開発環境はHTML5/JavaScriptで急速に充実してきています。 米セールスフォース・ドットコムは先月、新ブランド「Salesforce 1」を立ち上げ、モバイルへ全面的にシフトすることを宣言したばかり。このスタイルガイドは、同社のモバイルへの注力を示すものといえるでしょう。 これまでビジネスアプリケーション向けに、モバイル対応のしっかりとしたスタイルガイドが公開された例はおそら
高齢者へのiPad導入を阻んだiOSのUI/UXの話
高齢者へのiPad導入を阻んだiOSのUI/UXの話 先月（2013年11月）、徳島県南部局と美波町が共催する「ITふるさと村」の講座で、iPadを使ったタブレット講座を開催しました。その成功と失敗の体験について書こうと思います。 Facetimeビデオ通話のデモで会場を一気に盛り上げたものの、参加者に実際に体験してもらう段階で「大失敗」。AppleIDの取得とそのためのiCloudメールの登録をしてもらってから、と進めたのですが、30名ほどの参加者のうち時間内にゴール出来たのは、たったの１名。好きなアプリをダウンロードしてもらい、タブレットの楽しさを感じてもらう目標が、そのスタート地点にも立てず(;_;) 企画や運営、インストラクターとしては完全に落第点でした。それを棚に上げると、高齢者とITに関する課題が大量に見えたという点では、ある意味「大成功」だったとも言えるでしょう。 【講座内容
ドラクエ1に見るスマホRPGでのUI
ドラクエ1、というかドラクエポータルアプリ、ダウンロードしました。 最初のイメージではポータルアプリを起動して、その中からドラクエ1のダウンロード項目があると思ってたのですが、最初から含まれているのかなんなのか、ポータルアプリからそのままドラクエ1が起動できました。 いちいちポータルアプリを起動しなくてはゲームが出来ないのは面倒ですが、メーカー側からのお知らせが必ず目に入るという理由もまぁわかります。あとはそれが受け入れられるかどうか、ですね。 で、このドラクエ1ですが、スーパーファミコン版をスマホに移植したものです。そのためにスマホ用のUIにと調整されているのですが、なかなか評判悪く、ダウンロード開始直後のTwitterではその文句ばかりでした。ただ、よく考えられている部分もあったので、今回はちょっとそのあたりを見てみようと思います。 とはいっても、私はUIの専門家でもないので、私がプレ
スマホUI考（番外編） 顧客やユーザーの要望に全て対応すると、アプリは99%破綻する | fladdict
顧客や上司、ユーザーの場当たりな要望に対応しつづけると、どんなアプリもゴミアプリになる。たとえそれが理にかなった要望であっても。 なぜなら面積の限られたスマホでは「一画面の機能数とボタン数」が、使い易さと品質に深くリンクしているからです。 ということを、エラい人にプレゼンするのがお仕事の今日この頃。でも毎回毎回、同じことを説明するのがシンドイので資料をブログにまとめたいなぁと思うなど。 思考実験として、ここでは架空事例としてTwitterアプリを例に考えてみる。 何かの間違いで、日本の大手メーカーがTwitterを買収すると・・・UIデザイナーが体を張らないと99%ぐらいの確率でこうなるのです。 ここがオリジナル Request1: ダイレクトメッセージをトップ階層に ユーザーからの真っ当な要望。実際にはサービスの本質ではないのですが、要望はかなり多いはず。 ただTwitter社的にはme
データバインディングによるインタラクティブなUIの効率的な表現
requestIdleCallback()による協調的バックグラウンド処理の実現 / requestIdleCallback()
じーさんばーさんとタッチパネル - ２４時間残念営業
2013-03-27 じーさんばーさんとタッチパネル http://mainichi.jp/feature/news/20130326dde012040063000c.html 読んだ。 洗濯物の乾燥が終わるまでヒマなので書いてみる。 常日頃じーさんばーさんの相手する商売やってるわけだが、ＡＴＭの操作なんかでもじーさんばーさんに教えるのはひと苦労である。まったく操作できない人というのがいるわけだが、また考えてもしゃーないのに「なんでこんなに使えないんだろう」というようなことはよく考える。 で、まず思いつくのは「そもそもタッチパネルというものの意味がわからん」ということがあるようだ。つまり「画面に触ると操作される」というのが、どうしても感覚的に納得がいかないらしい。操作体系ってのはなかなかに厄介なもので、たぶんその人が三十代とかそれくらいの年齢で「体系」まるごとが新しく入ってくる段階ってのは
大人気ゲームアプリ、「拡散性ミリオンアーサー」から学ぶ画面デザイン - Webデザイン初心者向けのあれこれ
通勤・通学途中であったり、カフェや道端などでも、今や多くの人がスマートフォンでさまざまなアプリを楽しんでいますよね。 結局どんなゲームが一番人気なんだろう、と思い調べてみました。 『ソーシャルメディア調査報告書2011』によると、実に45.9%の人が育成ゲームで遊んでいるそうです。 ちなみに、「シミュレーションゲーム」が23.3％、「パズル」が14.0％、「学習・クイズ」が11.6％とのこと。 育成ゲーム、ダントツで人気なのですね…。 確かに最近は、綺麗なカードを育ててバトルする！というのが流行りなようです。 私なんかは綺麗なイラストを見ているだけで幸せなので、ついついダウンロードしてしまいます。 さてさて、そんな中でも、去年から私もやっているのが「拡散性ミリオンアーサー」というゲーム。 ▲ Webサイトでは本格的なアニメーションのトレーラーも公開 スマートフォン向けながら、RPGとサイト
UIデザインの参考になるサイトまとめ | ナナメウエblog
毎日仕事中と寝る前にチェックしてるUIの参考になるサイトをまとめました。 もう、見ているだけで涎が出ますね。 Dribbble – Following もはや知らない人はいないでしょう。世界中からハイレベルなデザインが集まるこのサイト。3時間に1回は見てます。 JAYPEG 日本版Dribbbleというとわかりやすいかもしれません。昨年末にできたばかりですが、すごく好きです。投稿しまくってます。自分で作ったUIを素材として公開してたりします。1時間に1回は見てます。 Inspired UI – mobile ui patterns カテゴリーが細かく分かれていて非常に嬉しいです。数も豊富で見やすいサイトです。 iOS Mobile Patterns カテゴリーがわかりやすく、マウスが拡大鏡になるので細部まで見ることができます。 iPad and iPhone Design Ins
最良のインターフェイスとはインターフェイスを持たないことだ - Nothing ventured, nothing gained.
Visual Basicの父とも言われるAlan Cooperが立ち上げたCooperに所属するGolden Krishnaが数日前に書いたブログ記事が面白いので、ざっと抄訳してみた。 "The best interface is no interface"と題されたこの記事の中で、彼は「最良のインターフェイスとはインターフェイスを持たないことだ」と主張する。 インターフェイス前提の社会 AppleのLisaは、DOSのようなCUI（キャラクターユーザーインターフェイス）から、GUIの世界にデザインを一変させた。そして、Palm Pilotから現在に至る情報機器はマウスさえ必要なく、タッチで操作できる世界を実現させた。この流れが現在のデザインの問題をすべて解決することになった。 では、良い自動車を作るにはどうするだろう？ そうだ、インターフェイスをそこに載せよう*1。 良い冷蔵庫を作るには
パスワードをマスクしない実装 | 水無月ばけらのえび日記
公開: 2012年7月9日3時5分頃 こんなお話が……「COOKPADの「伏せ字にせず入力」ボタンは素晴らしい (blog.tokumaru.org)」。 通常、パスワード入力欄では、入力中のパスワードがマスクされて読めないようになっています。しかし、マスクしない方が良いのではないかという説もあります。ずっと前に「パスワードを隠すのをやめよう?」という話でも触れましたが、ヤコブ・ニールセンが「パスワードを隠すのをやめよう (www.usability.gr.jp)」という主張をしています。 パスワード入力が難しくなると、ユーザーはより入力しやすいパスワードを利用しようとするでしょう。実際、ケータイでは複雑なパスワードを入れるのが大変面倒なため、ユーザーは数字のみの短いパスワードを好む傾向があります。パスワード入力がやりにくいと、ユーザーは弱いパスワードを使うようになり、逆に安全性が損なわれ
COOKPADの「伏せ字にせず入力」ボタンは素晴らしい
@tokuhiromから教えてもらったのですが、COOKPADのスマートフォン向けWebサイトのログインページには、パスワードを「伏せ字にせず入力」するボタンがついているのですね。 さっそく見てみましょう。まずはログイン画面です。パスワード欄の下側に、「伏せ字にせず入力」ボタンが見えます。 「元に戻す」ボタンを押すと、伏せ字に戻ります。 僕はこれを知って興奮しました。なぜなら、拙著「体系的に学ぶ 安全なWebアプリケーションの作り方」には以下のように書いたからです（P337～P338）。 パスワード入力欄のマスク表示は、現在の常識的なガイドラインですが、実は筆者自身は疑問を持っています。パスワード入力欄をマスク表示にすると、記号や大文字・小文字交じりの安全なパスワードを入力しにくくなるので、利用者は簡単な（危険な）パスワードを好むようになり、かえって安全性を阻害するリスクの方が大きいのでは
定期的に繰り返し実行する簡単ではないお仕事 - やねうらおブログ(移転しました)
いやー、この問題は本当に難しい。難しすぎて、どうやって解決すればいいかいまだによくわからない。わからないので、ここに書いてみる。 最初、とあるお客さんのために「ひよこの餌やりプログラム(仮)」を作っていたんだ。開始ボタンを押すとひよこの餌が出てくる。たったそれだけのプログラム。 今回は、これを「定期的に実行する機能が欲しい」と言われた。 この要望を実現するのがすこぶる難しかったんだ。 「やねうらおってそんなプログラムすら書けないの？老害なの？」 とか言わないで欲しい。この問題、本当に難しいんだよ！ ■ １度目のひよこの全滅 まず、この要望に沿って、私の会社のプログラマが当初、次のようなダイアログをつけたわけだ。 繰り返し実行のところにチェックを入れた場合、ここで指定された時間後にも繰り返し実行する。単位は分で指定する。1日ならば60×24 = 1440を指定する。そうすると、ひよこの餌やり
【インタビュー】クックパッドのUIデザイナー：「エンジニアの仕事が０を１にする仕事なら、デザインは1を100にする仕事 」 | Startup Dating
Startup Datingでインタビュー連載を始めてみることになりました。さて連載の初回は、2011年に新卒としてクックパッドに入社し、現在UIデザイナーとして活躍する片山育美さん（@monja415）。片山さんが現職に就くまでの道のりや、クックパッドのUIに関する考え方、片山さんが手がけた具体的なUI改善の事例やヒントなどをたっぷりお伝えします。 美術大学で勉強、もともと職人になりたかった もともと絵を描くのが好きだし得意、高校のときから職人になりたいと思っていたと話す片山さん。美術大学に進学し、ファイン系とデザイン系でデザイン系を学ぶことを選択。ファイン系とは、絵画や彫刻などいかにも“アート”というもの。ファイン系が芸術だから、どこか自分の中で完結してしまうところがある。でも、職人って誰かのために技術を使える人なんじゃないか、と。情報デザイン学科を専攻し、サービスデザインやUXと言わ
何故、エンジニアはUIのセンスがないか。
何故、エンジニアはUIのセンスがないのか、という自分にも当てはまるようなことについて書いてみる。 まずエンジニアがダメなUIを作ってしまう理由について、いくつかの仮説を立ててみる。 1.その画面を作るエンジニアは全てを知りすぎていて、もはやわからない人の気持ちがわからない説 2.エンジニアはITリテラシーは高いけど、自分ができることを人に理解できるように説明するのは下手説 3.技術的に実現する方に興味が偏って、ハナからUIの使い勝手に興味が無い説 4.国語力がない、自分が実現する文脈を表現するのはできるが、ユーザーの文脈に配慮した言葉を想像する力が無い説 5.仕様書を読まない、人の言う事を聞かない説。例えばOSが定めているユーザーインターフェースガイドラインに従わないので、UIパーツが意図した使い方をしておらず統一性に欠ける。 6.わかりやすい色や文字、レイアウトに関する知識が無い。センス
ふつうのformをつかいたい - はまちや２ - ニコニコ超会議2012
こんにちはこんにちは！！ はまちや２ (@Hamachiya2) ブロガー、クラッカー。特技は洗濯、趣味は破壊、苦手なことはプログラミング。 WEB+DB PRESS のお便りコーナー担当。 「はまちちゃん」とかで適当にググってください。 無料で プレミアム機能を 使う方法 見つける時間がありませんでした。 何話そう？ プログラムは苦手だし… セキュリティとか興味ないし… そんなわけで普通のことを話します。 本日のテーマ： 『ふつうのformを使いたい』 <form> 電話番号はハイフン抜きの半角で…（はいはい） フリガナはカナで… (カナで名前を学習してしまうのが嫌だけど…) 郵便番号は前と後ろに分けて… (めんどくさいなぁ…) 住所は全角で… (あーはいはい…) … (できた！) (これで送信、と…) ※エラー：住所を正しく入力してください (え、なんで！？) ※住所は全角で入力してく
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ククパド美ちゃんと学ぶ！クックパッドのUI改善プロセス：後編 // Speaker Deck