ブラウザのキーボードを制御する inputmode
October 26, 2019 created( August 1, 2022 updated ) input[type]によるキーボードの表示制御Googleの記事、web foundamentals 最適なフォームの作成では、type属性による入力しやすいキーボードの表示コントロールが説明されていました。 例えば、type="email"を指定すると、 <input type="email"> emailが入力しやすいキーボードが表示されます。 しかし、この指定方法には副作用もありました。 例えば、type="number" を指定した場合、 <input type="number"> このように、入力フィールド内に余計な入力補助要素 が表示したり、フィールドにhoverした状態でmouse wheelを動かすと 入力済みの値が勝手に増減 したりします。 前者はCSSで後者はJava
Sign-in form best practices | Articles | web.dev
Sign-in form best practices Stay organized with collections Save and categorize content based on your preferences. Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use. If users ever need to log in to your site, then good sign-in form design is critical. This is especially true for people on poor connections, on mobile, in a hurry, or under stress.
ユーザーが許可したくなるPush通知を考える｜sadakoa｜note
初めましての方もこんにちは、さだこえ (@sadako_a_ ) と申します。 DeNAに新卒で入社後、現在は株式会社FOLIOのデジタルプロダクトデザイナーとして、オンライン証券のUIデザインに従事しながら、スタートアップのデザイン支援を副業で行っています。 今記事では、主にアプリの機能として欠かせないPush通知に焦点を当て、記事を執筆します。 Push通知とはご存知の通りPush通知とは、アプリやwebサービスで何か変更や更新があった場合にお知らせをする機能です。一般的にこの業界で言われるPush通知は、Apple Push Notificationを指していることが多いと思われます。 その理由の1つとして、AndroidはPush通知に関してユーザーの許可を取る必要が無いからです。（ダウンロードする際にオプトインされるため、許可率は100%になる。） iOSやWeb Browser
快適なUXを実現するOptimistic Updates(楽観的更新)とは何か
先日、とあるJavaScript関連の記事を読んでいたところ、"Optimistic Updates" という技術が紹介されていました。 日本語に直すと "楽観的更新" といったところでしょうか。 はじめて聞いた言葉で、日本語の記事も見当たらなかったため記事にしてみます。 Optimistic Updatesとは Optimistic Updatesというのは、ネイティブアプリやSPA(Single Page Application)などで使われる技術で、非同期の通信処理が成功するという前提(楽観)のもとに、通信のレスポンスを待たずに次の処理を行うというものです。 最も多いOptimistic Updatesの使い方は、UIへの反映をリクエストの結果を待たずに行うというものでしょう。 Optimistic Updatesの例 例えば、よくある「いいね」ボタンのようなものにOptimisti
「カートに入れる」は業界用語 ヤフー「らくらく通販」、ECの当たり前を覆したスマホUIに注目
ECzine Day（イーシージン・デイ）とは、ECzineが主催するカンファレンス型のイベントです。変化の激しいEC業界、この日にリアルな場にお越しいただくことで、トレンドやトピックスを効率的に短時間で網羅する機会としていただければ幸いです。
こんなにあった！シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由 | マミオン有限会社-パソコン・数学研修、法人研修
シニアがウェブサイトを利用する際の大きなハードルの一つが、各種「入力フォーム」です。 一般的にシニアの方ほど入力に時間がかかり、また不適切な入力によるエラー発生頻度も高くなることは、ユーザビリティ業界の権威であるニールセンノーマングループのレポートも統計データを用いて指摘しています。 シニアをターゲットとしたウェブサイトの多くはこうした状況を考慮して、入力フォームのシニア対応に力を入れているところが多いのですが、その中でも私個人から見て特に完成度が高いと感じているのが、健康食品の『皇潤』で有名なエバーライフです。 今回、そのエバーライフの入力フォームで実装されている様々なシニア対応施策について、実装方法まで含めて詳しくご紹介していこうと思います。 1. 各フォームがそこそこ大きく見やすい 2. 必須項目表示がわかりやすい 3. ふりがなが自動的に入力される 4. 住所が自動的に入力される
ブラウザにはウェブページの日付を一定の場所に表示してほしい - Random Thoughts
私には、ウェブ記事を読むときに、まず日付を確認する習慣があります。このことは私にとっては「最低限の情報リテラシー」に思えます。なぜならば、その情報が「いつ書かれたものであるか」は、非常に重要なコンテキストあるいはメタ情報だからです。なぜ日付が重要かというと、「書かれたあとに知られた情報は、反映されていない」ことを意味しているからです。 現代の情報は評価が変遷しがちです。数年前の記事に書かれたことが、現在の「常識」から見ておかしいことなど日常茶飯事です。代表的な例としては、遠隔操作ウイルス事件やSTAP事件などがあります。それまで「事実」として語られていた内容が、ある時点を境に「誤り」になることは日常茶飯事です。したがって、記事の内容を解釈するにあたっては、記事の日付を考慮しなければなりません。さもなくば、私たちは誤った結論に達してしまう恐れもあります。 この点について人々がどうしているか想
スマホサイト最適化25の最新ルール | グロースハックジャパン | growth hack japan
Ryutaro Mori TwitterでGHJをフォロー！ FacebookでGHJをフォロー！ NEW スタートアップに欠かせない6種類の人間 検索エンジン大手グーグルが、スマホサイト最適化に関する大規模なリサーチを行いました。 その結果から導き出した「スマホサイト最適化25のルール」は、モバイル時代、特にtoCビジネスには欠かせない内容です。 調査に関して 本調査は、GoogleとAnswerLabの共同指揮の下に行われました。 モバイルサイトにとって最良のデザイン慣行を提言することを目的に行われた本調査は、以下の方法論で実行されています。 ・シカゴ・サンフランシスコにて、119時間のユーザービリティテストを敢行 ・iOS・Android両方を含むユーザーに調査を実施 ・ユーザーは、商品の購入、価格の調査、予約など、コンバージョンに関連するタスクを実行し、各サイトのユーザービリティを
ソシオメディア | あるとよい機能はない方がよい
UXデザインのコンサルティングではよく品質優先度マッピングというものを行います。これは開発プロジェクトの上流工程において、実装を検討している機能をリストアップし、そのひとつひとつについて想定する利用者の割合や利用頻度の観点からグルーピングし、実装の優先度を決める作業です。 これを行う目的は、UIをできるだけシンプルに保つことにあります。ユーザーが求める機能をすべて盛り込むと、当然UIは複雑になり、誰にとっても使いにくいものになります。また蓋然性のバランスが取れていない要件はプログラムを複雑にし、バグが増える原因になります。 UIデザインにおけるパレートの法則（結果の大部分は全体の一部によって生み出される）は、「ユーザーの80%は全機能の20%しか使わない」というものです。その20%に注力し他の優先度を下げることで、製品の利便性は向上するはずです。 Core, Important, Nice
スマホUI考（番外編） UIやUXを劇的に改善する、『ビッグオー駆動型開発』とは | fladdict
いま『ビッグオー駆動型開発』とよばれる開発手法が、業界の一部で注目を集めている。 その理由は非常にシンプルだ。『ビッグオー』は非常に安価で簡単な手法でありながら、従来の開発手法に比べ劇的にUIやUXを改善できるためである。 製品コンセプトのような上流から、ボタンのレイアウトといった下流工程、さらにはグロースハックやプロモといったリリース後のフェイズまで一つの手法でユーザビリティを評価できる。この汎用性がビッグオー駆動開発の大きな特徴であり、導入時の利点となる。 今回はこのビッグオー、の概要と具体的なやり方について論じたい。TwitterのUI拡張予言以来、久しぶりのUI系エントリである。 ビッグオー駆動開発とは何か？ ビッグオー駆動開発は、正式には『OKAN Driven Development（オカン駆動型開発）』とよばれる開発手法である。 これは自分のオカンを指標とすることで、低コスト
コンセプトを押し売りするな！SmartNewsが教える開発者バイアスの怖さ＆AppAnnie最新アプリ市場動向、出会い系が急成長？-D2CRアプリセミナー | アプリマーケティング研究所
11/28に東京（汐留）で開催された、D2CRさん主催のセミナー「ゲーム以外で！事業として成功させるアプリビジネス最前線！第２回目！」に参加してきました。 本記事では講演で参考になったポイントをまとめたいと思います。クックパッドさんの講演については後日別の記事にてお送りする予定です。 SmartNewsのビジョン ・世界中の良質な情報を集め、それを必要としている人へ送り届ける。 SmartNewsがUIに関して評価をいただいている3つの理由 １、ページめくりによる軽快なザッピング エンタメみたりスポーツみたりと、いろんなジャンルを簡単に切り替えて流し読みが出来る。 ２、独自のレイアウトアルゴリズムでアイキャッチと一覧性を両立 写真が大きく使えるということに加えて、1画面あたりの情報数が多く入る。 ３、形態素解析と長体圧縮を取り入れた見出し組版 文字のサイズが行によって変わる。一番読みやすい
広告費０円でもDAU１０倍!? ユーザーRetention(再訪率)を最大化する施策10選 - VASILY GROWTH HACK BLOG
あなたは初期のFacebookのグロースハッカーです。 仮に、その時点の会員数が100万人としましょう。 ある日、あなたはガムをクッチャクッチャしているザッカーバーグから、こう言われます。 「DAUを10倍にしてくれ。ただし広告はクールじゃないから広告費０円で！」 さて、あなたは何をしますか？ 恐らく、そんなムチャぶりをされた貴方を救う言葉は、「Acquisition(ユーザー獲得)」ではなく、「Retention(再訪率)」だと思います。 グロースハックって何って方はこちらの記事をどうぞ。 「グロースハック」とは Retentionってなに？ ユーザーの継続率や再訪率のこと。 超単純計算で言えば、20%の離脱率の低下は、20%のAcquisitionの増加と同じだけユーザー数を増やします。 じゃあ、実際にどんな方法があるのか。 明日からすぐ真似できるRetention施策10個をご紹介し
ユーザーの知識は低いレベルで停滞する
学習というのはたいへんな作業なので、ユーザーのやりたいことではない。その結果、彼らはユーザーインタフェースの探索をすることもなく、ほとんどの機能について知らないままだ。 User Expertise Stagnates at Low Levels by Jakob Nielsen on September 28, 2013 日本語版2013年11月25日公開 コンピュータシステムを長期間利用しているユーザーでも、知っていて使っているのは利用可能なコマンドや機能のほんの一部だけであることは多い。デザインのユーザビリティが優れていれば、ユーザーはシステムを利用しはじめて間もなく、かなり容易に一連の基本機能を理解する。しかし、その後、彼らは伸び悩み、それ以上はたいしてスキルが上がらない。システムを頻繁に使っているユーザーですら、年にわずか1つか2つの新しい知識を身につけられるようになるまでには何
ソシオメディア | iPhone の当たり判定を検証した
スマートフォンやタブレットなどのモバイルデバイス向けにUIをデザインする際には、タッチ操作に適したコントロール表現を追求しなければいけません。 タッチ操作に適したコントロール表現とは、前回書いたジェスチャもありますが、それ以前に、ボタンやリンクなどのUI要素を指で押しやすい大きさにすることが大切です。 パソコン画面のマウスポインターと違って、タッチスクリーンにおいて指でボタンをタップする場合、指がそのボタンを覆い隠してしまうので、意図した場所に正しく触れているのか分かりにくく、またボタン自体の視覚的なフィードバックも確認しづらいという課題があります。 またマウスポインターではピクセルレベルで画面上の座標を指し示すことができますが、指先ではそのような細かい操作はできません。 ですからタッチデバイスでは、ボタンやリンクが細かく密集しているようなデザインは大きなストレスになります。 最低限の大き
保存アイコン＝フロッピーディスクの時代は終わった…？ | Goodpatch Blog
まずはアイコン素材配布サイトから。 今は無料で使えるアイコン素材配布サイトが多いので、ここからダウンロードしてデザインする時に使う人も多いのではないでしょうか。まずはそのアイコン素材配布サイトで”save”と検索した結果を見てきます。 iconmonstr http://iconmonstr.com/ 以前にもMEMOPATCHで紹介した事のあるサイトです。ここはフロッピーディスクもありますがクラウドっぽいアイコンや下向き矢印のアイコンもありますね。 softicons http://www.softicons.com/ こちらはほとんどフロッピーディスクのアイコンです。しかも立体的なアイコンが多いです。 iconfinder http://www.iconfinder.com/ こちらもフロッピーディスクのアイコンが多いですが、下矢印やチェックマークもあります。 次に有名なサービスやアプ
"Amazon"に学ぶ、4つの観点で考察するUXデザイン | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
皆様こんにちは、シリコンバレーでUXデザイナーをしているライターのYUKIです。今回はあるひとつのサイトについてUXデザイナーとしての立場からレビューをしてみようと思います。 はじめに 私は友人らと作っていたスタートアップ会社を軌道に乗せるために数年前シリコンバレーにやって来て、現在は某米国の大企業でデザイナーとして働いています。公式な肩書きはヴィジュアル・デザイナーなのですが、実質的にはインタアクションやヴィジュアル両方に携わるユーザー・エクスペリエンス・デザイナーというところです。 LIGでは、かなり個人的な見解で、ユーザビリティに優れていると思ったサイトを説明もふまえながらレビューしたいと思います。 ただ、私が現在持っている知識は本格的にユーザビリティやデザインを学校で学んで得たものではなく、あくまでも実際の現場で働いて得たものばかりなので、「これが絶対に正しい」と思うのではなく、「
サービスやプロダクトの機能追加を検討する時にチェックしたい７つの項目。 | 無限クエスト
ジョブズもいってた、日本メーカーがAppleに負けっ放しの理由 この中で、一番言いたかったのはこの２つのジョブズ語録である。 ◆消費者に、何が欲しいかを聞いてそれを与えるだけではいけない。 ◆製品をデザインするのはとても難しい。多くの場合、人は形にして見せて貰うまで自分は何が欲しいのかわからないものだ 引用元: ユーザーファーストのmixiに未来はあるか | More Access,More Fun!. 気になった記事から冒頭引用。最近実体験として感じる。ユーザの意見に耳を傾けつつも、それを単にユーザファーストと体よく言って取り入れるのは絶対に違うと思うから、とても共感します。 それぞれの道のプロに聞けば、ヒントが返ってくるけれど。あえて慣れていない人とかに聞くならば、「何もわからない人が見た時にどう感じるか」「意図が伝わるかどうか」とかを聞くのは良いかもしれないけれど、「どんな機能が欲し
iPhone エディタアプリ「TextForce」の callback機能が私にとっては神な件。が、説明すればするほど泥沼な件。 | 覚醒する @CDiP
iPhone エディタアプリ「TextForce」の callback機能が私にとっては神な件。が、説明すればするほど泥沼な件。 おはようございます。これから舞鶴なのに、場所がわかりません。でも大丈夫。iPhoneがあるから、そうです、iPhona の @donpy です。 エディタアプリは数々ありますが、私が愛用する iPhone テキストエディタは「TextForce」です (｀・ω・´)ｷﾘｯ テキスト編集 Textforce for Dropbox 2.12.0 容量 :1.9 MB 価格 : ￥350 販売元: Yutaka Yagiura 昨日アップデートされた（2.12.0）にて、私にとっては神機能が実装されました。 その内容なんですけど、 ええ、意味がわかりませんね（笑）私もわかりませんでした（笑） なんだかよくわからないものの、他のアプリからTextForceにテキストを
A/Bテストとユーザビリティテストの使い分け
A/Bテストは、用意した複数のデザインのどちらの成果指標がよりよいか、という結果を定量的に比較検討するための手法です。いくつかのデザインの選択肢があった場合に実際にユーザーに利用してもらうことで、どのデザインが最も数値目標達成率が高いかを把握するのには有効ですが、なぜその結果になったのか、という理由を把握することはできません。デザイナーの発想の域を越えることはできず、変更すべきデザイン要素が別のものだったとしても気づくことができません（例：真の問題は、色ではなく配置だった）。 一方、ユーザビリティテストは、ユーザーの利用状況を観察することで、目的達成を妨げる問題など、定性的な洞察を得るための定性的な手法です。まだ開発途中である場合や、リリースしたあとに、ターゲットとしたユーザーがどのように思考し行動するかを把握するのに有効ですが、定量的な指標による評価にはあまり向きません（それをしようとす
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
in the looop | Looops communications