症状検索エンジン「ユビー」のUXライティングを改善している話
Ubie Discoveryでプロダクト開発をしている@jimboです。 Ubieでは現在、デザイン生産基盤整備の一環として、プロダクト上のUXライティングを改善する取り組みを行っています。この記事では、これまでの活動内容について紹介します。 UXライティングとは ユーザーは、プロダクトやサービスを利用する際、あらゆる場面で「言葉」を目にします。タイトルや説明文、ボタンのラベル、通知、エラーメッセージなどなど。 UXライティングでは、これらの「言葉」に注目し、どのような言葉を使うのか、あるいはどのような言葉を使わないのかといった「言葉のデザイン」をUXデザインの一部として行います。 ユーザーによりよい体験を提供し、サービスに魅力を感じてもらえるような「言葉づかい」を考えることがUXライティングの目的です。 症状検索エンジン「ユビー」におけるUXライティングの課題 症状検索エンジン「ユビー」
日本のウェブデザインの特異な事例
sabrinas.spaceより。 8週間もかからなかったはずのプロジェクト 日本のウェブデザインはどう違うのか? 2013年のRandomwireのブログ投稿で、著者(David)は、日本のデザインの興味深い相違点を強調しました。日本人はミニマリストのライフスタイルで海外に知られていますが、ウェブサイトは奇妙なほどマキシマリストです。ページには様々な明るい色(3色デザイン原則を破っている)、小さな画像、そして多くのテキストが使われています。2022年11月に撮影されたこれらのスクリーンショットで、自分の目で確かめて下さい。 ブログ投稿には、文化的専門家、デザイナー仲間、そして不満を抱く市民によって支持されている、考えられる理由がいくつか挙げられていました。 この理論が今でも正しいのか、また、もっと定量的なアプローチが可能なのか気になったのでやってみました。 私が見つけたもの 各国の最も人
UIデザインにおけるインターフェイスアーキテクトの役割｜Goodpatch Blog グッドパッチブログ
アーキテクチャ（Architecture）とは一般には建築や建築学を指しますが、コンピューターの世界ではあるシステムの概念や設計思想を「アーキテクチャ」という言葉で分類することがあります。中でもソフトウェアの領域では実装モデルの設計指針や分類、コンポーネントの相互関係、ソフトウェアの構築方法などを定めた一連の構造をそう呼ぶことがあります。 アーキテクト（Architect）とは建築家や（建築）設計士、技術者といった職種を指しますが、コンピューターの世界では「アーキテクト（仕組士）: システムのアーキテクチャを設計する責任がある、人、チーム、あるいは組織」（IEEE 1471）と規定されます。要するに、システムの構造設計に関して責任を持つ役割です。「構造設計の指針を示し、実行する人」と言った方がわかりやすいでしょうか。 このような、構造設計やそれを担う設計士の役割は、当然のようにUIデザイン
これだけ守れば見やすくなるデザインの基礎
2019/04/18に株式会社gumi様で行ったデザイン講義のスライドです。 デザインとは何か？デザイナーは何を考えてデザインを作っているのか？ という話から、実際にデザインを評価・検討するための言葉を紹介しています。 この 作品 は クリエイティブ・コモンズ 表示 - 改変禁止 4.0 国際 ライセンスの下に提供されています。 第二回「UIデザインをはじめよう」はこちら https://speakerdeck.com/kinakobooster/uidezainwohazimeyou 第三回「今日からできるUXデザイン」はこちら https://speakerdeck.com/kinakobooster/jin-ri-karadekiruuxdezain ※訪問講座のご案内※ あなたの会社に話しに行きます。料金表はこちら https://xemono.life/#/workwith/co
サービスに求められるものを、6段階に分類する｜深津 貴之 (fladdict)
「サービスの体験をよくする」というのが、漠然としてどうすればいいかわからないとき、まずユーザー体験を6段階に分類するのをオススメします。 この図をベースに、 ・あなたのプロダクトの現状 ・やろうとする施策やアップデートが、それぞれどのレイヤーに属するかを見て、基本は低レイヤー（機能より）のものから、充足させてゆきます。 下記は、家を例にしたのユーザー体験です。 Lv 0. 存在しない家がない。寒い。そして何も解決してない。 Lv 1. 機能がある屋根と壁と床がある。とりあえず雨風がしのげる。色々と我慢すれば、まぁ生きていける。 Lv 2. 安全と安心地震で壊れない。水漏れしない、火災報知器がついた、ドアに鍵がかかるようになった。最低限の信頼性が担保できる状態です。 Lv 3. 使いやすい、わかりやすいまっとうに使えるか。家のなかで迷わない。生活導線が機能するか。キッチンや冷暖房などがスムー
アニメーションを使った効果的なモバイルなトランジション例
アニメーションはユーザー体験において重要な要素です。モバイルアプリ画面のトランジションにおいて、アニメーションで伝えられることはたくさんあります。メッセージ送信、設定画面を開く、チェックボックス、別ページへの誘導などはすべて画面のトランジションです。それらをアニメーションで表現することはユーザーのアクションを促進する効果的な方法です。 この記事ではデザインを引き立たせ、ユーザーとの意思疎通やアクションを促すような効果的なアニメーション事例をレビューしていきます。 システムステータスの表示 何らかのアクションをユーザーが行った際には、そのアクションを受け取り処理していることをビジュアルレスポンスで明確に示す必要があります。アニメーションによるフィードバックがユーザー体験において有益なケースがいくつかあります。 ユーザーの操作に対する「反応」をきちんと返しましょう。ユーザーはシステムがアクショ
読みやすさのデザイン備忘録 | 深津 貴之 (fladdict) | note
noteのコア体験は、「読む楽しさ」と「書く楽しさ」だと考えています。 本来ならコア体験は、調査でしっかりと導くべきものです。しかしアカデミックなUXとは異なり、実際のスタートアップ環境では時間とリソースに限界があります。このため調べながらも、走り出さなければなりません。 まず序盤はヒューリスティック（経験）ベースのデザインを行いつつ、調査やテストが可能なところから、裏づけやチューニングを行う流れになりそうです。 以下、「読書体験」における「可読性」のパートのメモ。noteチームにとりあえず提案する予定の諸々です（現時点では個人の見解です）。基本的には「当たり前のことを、当たり前に」やる予定。「これもやっとけ」的なことがあれば、タイポグラファーの諸先輩の方々には、ぜひご意見をお伺いできればと。 書体をサンセリフ系に変えるべきか？デジタルでは、一般的にサンセリフ体の可読性は、ローマン体よりも
CASHのデザインプロセスが凄すぎて思わずブログを書いてしまった話
ここが決定的に違うんです。 微妙なサービスの多くは機能ドリブンのあやふやなゴールセッティングでデザインを始めてしまうため、要件がぶれてしまい「他行では○○だ」とか「マネジメントが××と言っている」という非論理的な要件をただ浴び続けるだけに陥りがちです。 どの高みを目指すかによってデザインの重要度は大きく変わります。 極論とりあえず1個の機能としてあればいいのなら、デザインなんかいらないわけです。存在することが付加価値なので。 凄さポイント：ゴールから逆算して論理的に要件が導き出されている 凄さ2：ありがちなデザインをなぞる ゴールが明確になり、要件が決まったとしても、その最適解を生み出すプロセスは違いを生む大きな要因になります。 特に金融系のようなどちらかというとオールドな業界の場合、新しいことやサービスをやろうとすると「新しいからOK！」的なデザインがまず出てくることが多いのですが、なぜ
The worst volume control UI in the world
About “wants”, “cans”, “needs”, and “shoulds”The original reddit post has now hundreds of examples of terrible volume UI, and it keeps growing — a fun exercise/joke, that can strengthen one’s creative muscles and ability to think outside of the box. People have been participating simply for the fun of coming up with the most absurd and weird interactions and interface elements. But there’s definit
16種類（45カテゴリ）の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選（スライド付）
2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今
クレジットカードフォームの解剖学 | POSTD
オンラインでクレジットカードを使って支払うことは簡単ですよね？この答えはYesでもNoでもあります。Yesの理由は、インターネットが普及された初期からずっとそうしていたから（例：Amazon）。Noの理由は、まったく同じクレジットカードフォームは2つとないからです。 過去20年以上で、私たちはオンライン支払のメンタルモデルを作り上げてきました。「財布からクレジットカードを取り出して、ウェブのフォームに必要なカード情報を入力、そして申込みボタンを押す」というものです。しかし、ユーザーが答えないといけない質問でいっぱいなので、全てを入力するのはとてもややこしい行為になってしまいます。そして言うまでもなく、誰も取扱い説明書なんて読みたくありません。 さまざまな有名ウェブサイト・アプリのクレジットカードフォーム 何かの代金をオンラインで支払う時は、人へ支払う時より2,3倍遅れをとります。端末のボタ
画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール | UXデザイン会社Standardのブログ
2014.11.19 / UI 画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール Tomohiro Suzuki クライアントやディレクターから渡された画面遷移図を元にワイヤーフレームを作ってみると、後から足りない画面が次々に発見された、または画面内の情報がどこに繋がるのか分からないといった経験はありませんか？ この画面遷移図というものは本来は制作範囲の全体像と構造を明確にし、必要な画面というものを洗い出したりするものです。通常のWebサイトであれば、従来のような画面遷移図でも問題ないかもしれませんが、多くのインタラクションが発生するサービスの設計では複雑化しやすく、何度も情報を行き来して確認することになるため時間がかかります。 原因のひとつとして、画面遷移図では画面名のみを記載して繋げていくことになるため、必要な情報が不足していることが挙げられます。その結果、本来で
UXについて理解が深まる！ユーザーエクスペリエンス概念図まとめ【全26枚】
photo credit: eskimoblood via photopin cc こんにちは、@h0saです。 世に出ているUXについての理解を助ける概念図をまとめました。 UX（ユーザー体験）という概念は目に見えない分、それを説明するための図やビジュアルで説明した資料が世の中に数多く存在しています。 この記事では、主に有名どころをピックアップしつつ、全26枚の画像を短い説明を加えて紹介していきます。 更新履歴 2014/12/29： ・Alan Cooper氏のUX概念図（Form/Content/Behavior）を追加 2015/08/16： ・リンク切れの修正とそれに伴う記事の再構成 2016/05/06： ・リンク切れの修正 ・UX Maturity Model を追加 ・記事末尾に参考資料のスライドを追加 2017/1/8： ・Alan Cooper氏のUX概念図を削除（ソー
2.5dBUTTON - NOHT CO.,LTD.
none file print delete clear save upload cloud folder camera photo image barcode phone music video playmedia record play pause stop eject bell volumeup volumedown volume off light dark lock unlock flag wifi time map geo location pin walking bicycle car bus plane compass cursor pointer grab arrowup arrowright arrowdown arrowleft up right down left back next dropdown sort good bad full small move un
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Polaris: A System for Query, Analysis, and Visualization of Multidimensional Databases By Chris Stolte, Diane Tang, and Pat Hanrahan
Storybook: Frontend workshop for UI development
http://twitter.com/i/moments/880688233641848832
CSSのすぐに使える小技から驚きのスゴ技まで！CSSアニメーションの素晴らしいアイデアのまとめ | コリス
日本中の「UI/UX」の参考になるスライド資料を気合いで全部集めました！（たぶん） | BtoBサービスキューレーション Boxil（ボクシル）まとめ！
Framer — The internet is your canvas
