「ユーザーが行動をおこす条件」の話｜深津 貴之 (fladdict)｜note
新入社員のこばかなさんが、「こばかなスケッチ」という自分企画を頑張っている。THE GUILDでの日々の仕事と、読書で学んだことを、一枚のスケッチにまとめるチャレンジだ。 彼女のスケッチが溜まってきたので、復習とサポートを兼ねて、解説を書いていきたい。第二回はこの絵。 行動 = 動機 × 実行能力 × きっかけ今回のこばかなさんのイラストは、「フォッグの消費者行動モデル」という概念モデルだ。ざっくり言うと、ユーザーが行動を起こすために必要な3条件を示している。 このモデルでは、「ユーザーが何かアクションを起こす」条件を、 B = MATという、とてもシンプルな式で表現する。 その意味は、「行動(Behavior)」には、「動機(Motivation)」と「実行能力(Ability)」があるタイミングで、「きっかけ(Trigger)」が訪れなければならない…というものだ。 ・動機(Motiv
ウェブアクセシビリティ導入ガイドブック｜デジタル庁
デジタル庁では「誰一人取り残されない、人に優しいデジタル化」を実現するため、継続的に「ウェブアクセシビリティ」の向上に取り組んでいます。この度、ウェブアクセシビリティに初めて取り組む行政官の方や事業者向けに、ウェブアクセシビリティの考え方、取り組み方のポイントを解説する、ゼロから学ぶ初心者向けのガイドブックを公開します。 優しいサービスのつくり手になる一助として、ぜひご活用ください。 公開の背景ウェブアクセシビリティの向上に取り組むには、非常に専門的な複数の規格とガイドラインをそれぞれ確認する必要があります。そのため、適切なやり方がわからないままに、現在は間違っている対応の踏襲、不要・過剰な対応、不適切な対応をしてしまうことがあります。ウェブサイトだけではなく、申請・手続等のデジタルサービスの重要性が増す中で、最新の技術動向を踏まえた、初心者が学習できる行政機関向けの研修資料が不足していま
ブラウザのキーボードを制御する 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.
A Primer on Android Navigation
Any vehicle someone uses to move between scenes in your interface — that’s navigation As soon as you link two screens together in an app, you have navigation. That link—whatever it may be—is the vehicle that carries users between those screens. And although creating navigation is relatively simple, creating the right navigation for your users isn’t always straightforward. In this post we’ll take a
サービスに求められるものを、6段階に分類する｜深津 貴之 (fladdict)
「サービスの体験をよくする」というのが、漠然としてどうすればいいかわからないとき、まずユーザー体験を6段階に分類するのをオススメします。 この図をベースに、 ・あなたのプロダクトの現状 ・やろうとする施策やアップデートが、それぞれどのレイヤーに属するかを見て、基本は低レイヤー（機能より）のものから、充足させてゆきます。 下記は、家を例にしたのユーザー体験です。 Lv 0. 存在しない家がない。寒い。そして何も解決してない。 Lv 1. 機能がある屋根と壁と床がある。とりあえず雨風がしのげる。色々と我慢すれば、まぁ生きていける。 Lv 2. 安全と安心地震で壊れない。水漏れしない、火災報知器がついた、ドアに鍵がかかるようになった。最低限の信頼性が担保できる状態です。 Lv 3. 使いやすい、わかりやすいまっとうに使えるか。家のなかで迷わない。生活導線が機能するか。キッチンや冷暖房などがスムー
UXピラミッド – UXデザインの正しい評価方法 – デザイン会社 ビートラックス: ブログ
前回の「UXハニカム – UXデザインの正しい品質評価方法 –」では、サービスやプロダクトのUXデザインを評価する際に一般的に用いられている、UXハニカムを活用した方法を紹介した。加えて、実はもう一つユーザー体験のクオリティを測る方法がある。 ユーザー体験を構成する3つのポイント消費者がサービスを受けるとき、ユーザーがプロダクトを利用するときに受け取る体験の質を高めるのがUXデザイナーの仕事になる。 そして、その体験を左右するのが、1. 見た目の品質 (Look), 2. 感覚の品質 (Feel), 3. 使いやすさ (Usability) である。大きく分けてこの3つの要素のクオリティが高いほど、ユーザーに対してより優れた体験を提供することが可能になる。 実用性と利用感覚を測るUXピラミッドUXハニカムに加えて、もう一つのUXクオリティを測る手法としてUXピラミッドがある。6つの階層で構
OMO型UXでデジタルの先を行く中国 – マーケティングベース
文：大下文輔 キャッシュレス社会が進む中国についての報道が最近目立つが、キャッシュレスやシェアエコノミーなどの利便性の背後にあるビッグデータが社会をどう変えていくのか、など注目すべき点がある。 2017年12月7日に行われたビービット主催のセミナー「デジタルUXの最先端」では、同社の藤井保文氏が、ビジネス領域であるUXの向上というテーマに沿って、中国のデジタライゼーションを読み解いた。 そのキーワードは、「信用の可視化」と新たな競争軸としての「UXの格上げ」だろう。当日話された盛りだくさんのトピックから、その点に焦点を当ててダイジェストする。 ビービット 藤井保文氏 中国の急激なデジタルシフトを俯瞰（ふかん）する 中国のデジタルシフトをおさらいしておくと、人口約13億人中インターネットユーザーは53％の約7億人。普及のスピードは、2010年で34％であったことを考えると著しく、またさらなる
心地よいUX/DXを提供するための小さなコンポーネント - スタディサプリ Product Team Blog
こんにちは、Webエンジニアチームの@sat0yuです。 これまで弊社のイベント報告系記事しか書いてこなかったのですが、今日はすこし技術寄りの話をします。 現在私達のチームでは、生徒向け学習サービス（日本ではスタディサプリ、 海外ではQuipper Videoの名称で提供）のリニューアルプロジェクトを担当しています。 リニューアルバージョンのリリースは以下のとおり計画されており、すでに合格特訓コースのユーザには提供を開始しています。 2018夏: スタディサプリ合格特訓コースユーザ 2019春: スタディサプリの全ユーザ 2019春〜夏: Quipper Videoの全ユーザ 本投稿では、リニューアルプロジェクトの中で生まれた、小さいけれども非常に便利な状態遷移管理コンポーネントの紹介をします。 TL; DR 心地よいUXを表現するために５つの状態遷移を考える必要がある 状態遷移を簡単に実
ユーザーが許可したくなるPush通知を考える｜sadakoa｜note
初めましての方もこんにちは、さだこえ (@sadako_a_ ) と申します。 DeNAに新卒で入社後、現在は株式会社FOLIOのデジタルプロダクトデザイナーとして、オンライン証券のUIデザインに従事しながら、スタートアップのデザイン支援を副業で行っています。 今記事では、主にアプリの機能として欠かせないPush通知に焦点を当て、記事を執筆します。 Push通知とはご存知の通りPush通知とは、アプリやwebサービスで何か変更や更新があった場合にお知らせをする機能です。一般的にこの業界で言われるPush通知は、Apple Push Notificationを指していることが多いと思われます。 その理由の1つとして、AndroidはPush通知に関してユーザーの許可を取る必要が無いからです。（ダウンロードする際にオプトインされるため、許可率は100%になる。） iOSやWeb Browser
競争優位性構築のための人間中心機械学習〜CVRからUXへ〜 - LIVESENSE Data Analytics Blog
テクノロジカルマーケティング部データマーケティンググループにてデータサイエンティスト兼UXアーキテクトをしている新保と申します。普段は機械学習を中心としたデータ活用の推進や新規機能のユーザ体験の設計をしています。ここ1年程リブセンスではサービスの戦略レイヤーや主要機能と結合度の高い領域に対して機械学習を適用していくことに挑戦しており、今回はそれらを実際にどのように行っているかをご紹介したいと思います。 パッチ型機械学習の成功体験とその限界 本題に入る前にリブセンスのデータ活用の歴史について少しお話しします。以前に別のメンバーが投稿した記事に詳しい説明がありますがリブセンスでは2014年にデータ活用の専門組織を立ち上げてから現在に至るまで機械学習のビジネス活用を継続的に行っています。初期の頃は既存サービスの枠組みの中でサービスとの結合度が出来る限り低く、かつ利益インパクトが大きい領域に機械学
読みやすさのデザイン備忘録 | 深津 貴之 (fladdict) | note
noteのコア体験は、「読む楽しさ」と「書く楽しさ」だと考えています。 本来ならコア体験は、調査でしっかりと導くべきものです。しかしアカデミックなUXとは異なり、実際のスタートアップ環境では時間とリソースに限界があります。このため調べながらも、走り出さなければなりません。 まず序盤はヒューリスティック（経験）ベースのデザインを行いつつ、調査やテストが可能なところから、裏づけやチューニングを行う流れになりそうです。 以下、「読書体験」における「可読性」のパートのメモ。noteチームにとりあえず提案する予定の諸々です（現時点では個人の見解です）。基本的には「当たり前のことを、当たり前に」やる予定。「これもやっとけ」的なことがあれば、タイポグラファーの諸先輩の方々には、ぜひご意見をお伺いできればと。 書体をサンセリフ系に変えるべきか？デジタルでは、一般的にサンセリフ体の可読性は、ローマン体よりも
UIデザイナーがSketchを使う理由と導入方法 – WPJ
スマートフォンが世に出て以来、アプリを制作するためにデジタルツールを使うデザイナーが急増し、それに合わせて従来のツールが進化を遂げたり、時代に合った新しいツールが登場したりしています。 中でもBohemian Codingが開発・販売しているSketchは一定の人気と地位を獲得しており、今やUIデザインツールの代名詞となっています。 このLessonでは、Sketchについてまだご存知でない方やこれから使おうと考えている方を対象に、Sketchの概要と基本的な使い方、架空のアプリ画面を例にしたUIデザインの制作方法、エンジニアとのやりとりなどについて解説します。 Sketchとは何か？ はじめに、そもそもSketchとは何なのか、改めておさらいをしておきましょう。 Sketchを開発・販売しているのはオランダのBohemian Coding。しばらくアムステルダムを拠点にしていましたが、現
快適なUXを実現するOptimistic Updates(楽観的更新)とは何か
先日、とあるJavaScript関連の記事を読んでいたところ、"Optimistic Updates" という技術が紹介されていました。 日本語に直すと "楽観的更新" といったところでしょうか。 はじめて聞いた言葉で、日本語の記事も見当たらなかったため記事にしてみます。 Optimistic Updatesとは Optimistic Updatesというのは、ネイティブアプリやSPA(Single Page Application)などで使われる技術で、非同期の通信処理が成功するという前提(楽観)のもとに、通信のレスポンスを待たずに次の処理を行うというものです。 最も多いOptimistic Updatesの使い方は、UIへの反映をリクエストの結果を待たずに行うというものでしょう。 Optimistic Updatesの例 例えば、よくある「いいね」ボタンのようなものにOptimisti
Kaizen PlatformはこうしてSaaSからマーケットプレイスへ進化した｜決算が読めるようになるノート
柴田: 今回の「しば談」は、Kaizen PlatformのCEOの須藤憲司さんにお越しいただきました。まずは会社の紹介をお願いしてもよろしいですか？ 須藤憲司さん（以下、敬称略）: Kaizen Platformは、企業のWebサイト、UIの改善をやっています。ツールを渡すだけでなく、サポートまで行っています。ツールだけあっても、テストしたりとか実装したりとかって、皆さん忙しくてできないので。僕らは「グロースハッカー」と言われる、デザイナー、エンジニアさんを3,600人（注: 2016年5月現在）くらい抱えているので、彼らが改善案を作ってくれて、それを選ぶだけでUIの改善がどんどん進む、というサービスを提供しています。 起業のアイディア = 前職での課題柴田: なんでこのビジネスをやろうと思ったんですか？ 須藤: 僕はもともとリクルートにいまして、まさにプロダクトやマーケティングをやって
XD（クロスディー）｜体験にフォーカスするメディア
【コラム】 吉田奈緒子｜“ギフト”がつくる循環 アイルランドの「カネなし男」が引き出した、ローカルな経済圏の可能性
傘を持っていくべきか答えてくれるLINE Botを作ってみて分かったこと - noriaki blog はてな出張所
忙しい人のためのサマリ 「傘を持って行った方が良いか」教えてくれるLINE Botを作ったので、コミュニケーション設計として重要だった3つの考え方を書きました。「入力方法」「返答方法」「名称やキャラクター設定」を考えたら、コミュニケーションプラットフォームでBotサービスを作るときに大切にしたいことが分かりました。 カサいる？ LINEのBOT API Trialを利用して、「カサいる？」というBotを作ってみました。 画像にあるとおり、LINEトークの基礎機能である「位置情報を送信」すると、傘を持っていくべきか（その地点に今雨が降っているか、1時間の間に傘が必要なくらい雨が降るのか）を教えてくれるもの*1です。 よかったら試してみてください。 （LINEアプリ内のQRコードによる友達追加から上の画像を読み取ってみてください） というBotサービス紹介だけでは申し訳ないと思うので、ここでは
iPhone Safariで動画をインライン再生する方法 - Qiita
iPhone SafariのVideoタグの制限 iPhone SafariのVideoタグには大きく2つ制限がある。 ユーザインタラクション（タップ）なしに再生できない 初期再生時必ずフルスクリーン再生になる 特に2がクセモノで、これのせいでモバイルブラウザに動画広告はほぼ無いし、モバイルブラウザゲームには動画演出がない（MotionJPEGみたいにjpegを数百枚数千枚差し替えるとか涙ぐましいことをしている例はある）。 制限は超えられる この制限が超えられないものかと調べてみると、やはり同じようなことを訊いている人が居た。 inline html5 video on iphone - Stack Overflow http://stackoverflow.com/questions/30855662/inline-html5-video-on-iphone で、そのベストアンサーが I
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Patterns
Double touch tap workaround for React based on onTouchTap (react-tap-event-plugin)