UI上のラベルや説明文をどこにどれくらい書くべきか - hitode909の日記
インタラクションのあるUIを作っていると、UIパーツのみからは挙動を読み解けない場合があって、そういうときには、一言説明を添える、ということをやる。 こういうときに、どこにどれくらいの説明があれば必要かつ十分か、ということを学べる機会はあまりない気がする。 アルバイト氏のPull Requestのレビューをしていたら、これだと何が起きるかわからないので説明を添えたいよね〜って話をしていたのだけど、そういえばこういうことはどこで学べるのだっけ?というのが気になってきたのだった。 ブログチームでブログを作っていた頃には、編集メンバーが画面のレビューをしてくれて、ここのUIの文言はこれくらいのことを書けば必要かつ十分で、ヘルプの言い回しや告知とも整合性が取れてよいのではないでしょうか、みたいなことを一緒に考えてくれていて、勉強になっていた。 ブログのサイドバーから、説明文を消し去ると、フォームに
enigmoデザイナーの「最近気になるデザイントピック」- アプリUI編 - エニグモ開発者ブログ
こんにちは。デザイナーの別所です。 本日はenigmoデザイナーの、最近気になっているデザインに関するトピックをご紹介したいと思います。 今回のテーマは「アプリUI編」です！ 心地よい使い勝手！映画レビューアプリ「Must」 「Must」は映画/TVファンのためのSNSアプリです。 作品のレビューを投稿したり、見たい映画や番組をコレクションとして保存できたり、友達と繋がって他の人がコレクションしている作品を見たりすることができます。 おすすめ作品をデイリーでレコメンドしてもらえたりもします。 2016年にリリースされたアメリカ生まれのアプリです。 引用：https://mustapp.com/ デザイナーのこだわりを感じるUI/UX Mustの一番の特徴は、画面の下半分の操作で完結するように設計されているUI/UXではないでしょうか。 レビューの入力や「観たい」「鑑賞済み」を選択するボタン
そのユーザーファースト、本当にユーザーファーストですか？｜宇野雄 / note inc. CDO
こんにちは。クックパッド デザイン戦略本部長の宇野です。 いきなりですが「ユーザーファースト」って良い言葉ですよね。サービスのあり方の基本であり、モノづくりをしていてそれを無視したいという人はいないはず。 しかし僕はこのユーザーファーストという言葉をあまり使わず、使う際は慎重に取り扱うようにしています。この言葉の概念はとても難しいと考えているからです。 「ユーザー」って誰のこと？目の前にいるユーザーの話をそのまま取り入れれば必ず良いものが作れるの？ 答えは明確にNoです。 当然ですが無視するべきという話ではありません。ただ、向き合ってるユーザーがどんな人なのか、その人が本当に欲しているものは何なのかを徹底的に考え抜く必要があります。 お問い合わせをしてきている人はだれ？ ユーザーからのご意見やお問い合わせ、アプリストアのレビューはとてもありがたいですよね。そこから新たな改善案をもらったり、
「操作が難解」「ミスを誘引する」事例から学ぶUIデザイン改善方法――「何ができるのか」が伝わるデザインとは？
【コラム】PCブラウザで横スクロールが必要な場面とは？ タッチパネルデバイスで横スワイプすることが普通になっても、PCで同じ動作が普通になるとは限りません。画面遷移せずに、同列の情報を多数見せるという目的上では横スクロールは相性がいいのですが、PCブラウザとタッチパネルデバイスでは話が変わってきます。 そもそもPCブラウザ上で横スクロールができるという認識自体がユーザーになく、重要な情報が横スクロールした先にあるとは考えません。PCと他のデバイス間で同じ体験をユーザーに与えたいという目的があるのかもしれませんが、Webサイトの操作がいちいちどうだったかユーザーは覚えていません。なぜならスマートフォンとPCで同じレイアウトになっていないからです。 レイアウトが変わればUIも変わりますので、必要な操作はその時その時にUIを見て判断します。ではPCブラウザ上で横スクロールが必要なのはどのような場
2020年 UIデザイナーが読んで良かった本 9冊｜kassy
こちらは dely #2 Advent Calendar 2020 の12/22の記事になります。 昨日はyuaoさんのデザインの指示に迷った時は、「要素に分解」がいいかもという記事でした！ 現在、delyではエンジニアやデザイナーが日替わりで記事を投稿しています。どれも読み応えがありますので、よかったら下記のリンクもご覧ください。 dely #1 Advent Calendar 2020 - Adventar dely #2 Advent Calendar 2020 - Adventar ーーーーー PRおわり ーーーーー UIデザイナーのkassyです。あっという間に年末ですね。 今年も読んで良かったUIデザイン関連の本を中心に紹介したいと思います。気になる本があったら、年末年始のお供にぜひどうぞ！ 前回書いた記事もよかったらぜひご覧ください。 1.『オブジェクト指向UIデザイン──使
UIデザインのためのブックリスト（2020, 追記あり）｜yoshi_design
UXや認知科学のブックリストはおかげさまでかなり読まれていますが、そういえば「UIデザイン」のリストは作ってなかったなと思い至って本を探し始めました。手元の本を並べてみると該当する本はあまり多くなくて、関連する周辺の分野のものにも対象を広げることにしました。UIデザインと周辺分野との境界はハッキリと分かれるわけではないので、自分が作った他のブックリストとの重複があります。また、分野の明確な線引きはしていませんのでご了承ください。 UI（ユーザー・インタフェース）が関わる分野はかなり広いのですが、このリストでは主に、比較的新しい（と言ってもiPhone発表から10年以上経ちますが）「スマートフォン・アプリのUIデザイン」を念頭において選んでいます。パソコンのソフトウェアや情報システム、ウェブ（情報設計やウェブ・ユーザビリティーを含む）のインタフェース・デザインについては、すでに世の中に知見や
pixivのUIを迅速にアップデートする UIUXチームのフロントエンドモダン化の歴史 - pixiv inside
こんにちは。pixiv事業本部のUIUXチームでプロダクトマネージャーを担当しているdo7beです。ピクシブにエンジニアとして入社して5年弱ほどで、1年前からプロダクトマネージャーとして活動しています。 今回は僕が所属しているUIUXチームの歴史とフロントエンド技術のモダン化についてご紹介していきたいと思います。 UIUXチームとは UIUXチームとは、その名の通りUIに関する問題解決・改修・新機能開発を行うチームです。その他にも海外ユーザーに向けたSEO・ローカライズやフロントエンドエンジニアの教育を行っています。 UIUXチームでは意図・目的に合ったUIを目指すためデザイナーとエンジニアが密にやりとりしています。これは学生アルバイトエンジニアも同様で、新規機能をリリースするなどの大きな成果を挙げています。 イラストを魅力的に紹介！ pixivでAMP Storiesを実装しました @s
AIが手描きのスケッチを美しいプロトタイプに変換してくれる「uizard」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、手描きしたスケッチをAIが美しいワイヤーフレームに自動変換して、動くプロトタイプを誰でも簡単に作成できるWebサービスをご紹介します！ 現時点ではクローズドベータによる参加となりますが、すでに実用的なレベルに調整されています。これからプロトタイプを作成しようと考えている人は、ぜひ参考にしてみてください。 【 uizard 】 ■「uizard」ってどんなサービス？ 最初に「uizard」でどんなことができるのか簡単にご紹介しておきます。 このサービスのポイントは、手描きのスケッチをAIが美しいフレームワークに自動変換してくれることです。 変換方法は簡単で、手描きのスケッチをスマホのカメラで撮影するだけです！ するとAIがスケッチを分析してワイヤーフレームに変換してくれます。 さらに、PCのブラウザからプロジェクト画面を開いて自由に編集で
従来のUIデザインの常識はモバイルアプリに当てはまらないことが判明
フィンランドのアールト大学の研究者は国際共同研究の一環として、画面上の何が視覚的注意を引きつけるかについて調査した。その結果、これまでの共通理解が、モバイルアプリケーションには当てはまらないことが明らかになった。 この研究はアールト大学の研究者の他、インドのIITゴアやトルコのイルディズ技術大学、中国のHuawei Technologiesの研究者が共同で実施した。研究チームは2020年10月6日（現地時間）、仮想カンファレンス「MobileHCI 2020」で研究成果を発表した。 今回の研究は、よく使われるモバイルアプリケーションの要素をユーザーの視線がどのように追い掛けるのかを初めて実験的にテストしたものだという。画面上の何が視覚的注意を引きつけるかに関する従来の研究ではデスクトップアプリケーションやWebインタフェースを中心としていた。 研究チームは代表的なモバイルUI（ユーザーイン
「コマンドプロンプトは黒い画面に文字がたくさん出て怖い」→「チャット風」にしてみた LINEみたいで「分かりやすい」と話題に
黒い画面に“コマンド”を入力して操作を実行する「コマンドプロンプト」。慣れていないと少しとっつきにくいその画面を、LINEっぽくすることで親しみやすくした「チャット風コマンドプロンプト」を実際に作ってみた人が現れ話題になっています。 プログラマーでITエンジニアのkenji（@kenjinote）さんが開発し、GitHubでソースコードなどを公開しています。 チャットでメッセージのやり取りをしているような見た目で、こちらがコマンド（命令文）を入力すると、返信のような形で内容が表示・出力されます。入出力がはっきり分かれていて見やすく、“相手側”がアイコン付きなのが、なんだかホッとします。なにより全体的にかわいらしい。 チャット風コマンドプロンプト（画像提供：@kenjinoteさん） 通常のWindowsのコマンドプロンプト このアイデアは、Web制作企業ビックリマークの代表取締役でエンジニ
なぜWebサービスはUIの改悪を繰り返すのか
自分はWebサービスの表側を作るお仕事に就いていますが、日本人ってサービス系の開発に向いてないよなーと強く思います。 特にWebサービスやアプリについては、まじで向いてない種族だと思います。 一番アカンなーと思うのが、リリース後の開発において機能追加は精力的に行う一方、機能削減はぜーんぜんやらないんですよね。 Webサービスって、リリース直後の段階である程度しっかりとしたUIで組まれていて、機能追加のことは基本的には考慮されていないケースが多い印象があります。 そのせいか、機能が追加されればされるほどいびつなUIとなっていって、最初は見やすかったのに、どんどん見づらくなっていくという…。 そうなってくると途中で全面リニューアルを行わざるを得ないことになるんですが、その頃には元のコードはぐっちゃぐちゃになっているわ元いたエンジニアはやめてるわてんやわんやで、もうどーしようもない状態になってい
オンライン演劇「むこうのくに」を支える技術 ~フロントエンド・UI/UX編~
7月23日から8月2日にかけて上演された劇団ノーミーツによるオンライン演劇「むこうのくに」。 オンラインでライブ配信される演劇で140分という長編、チケットは有料にも関わらず、7000人以上が観劇するなど話題を呼びました。 劇場でのリアルの演劇に制限がかかるなか、新しいエンタメの形として注目されるオンライン演劇。 劇団ノーミーツはその中でも最も注目を浴びながら最先端を走っている劇団です。 今作、前作や他のオンライン演劇以上に世界観や没入感といった点で大きな注目を集めました。 そんなオンライン演劇「むこうのくに」を支えた技術・デザインを連載形式で深堀りしていきます。 第１弾は「フロントエンド・UI/UX編」。 クリエイティブディレクターの鈴木健太さん、UI/UXデザイナー・フロントエンドエンジニアの藤木良祐さん、アートディレクション / グラフィックデザインを担当したm7kenji（
人にうれしいAIのためのUXデザインガイド（People + AI Guidebook）
AIシステムは、時間とともに適応していきます。変化に対して、ユーザー側も準備が必要です。システムをどのようにトレーニングすればよいかを、ユーザーが理解するようにします。この章の内容は次のとおりです。 AIのどの側面をユーザーに説明しますか？ ユーザーにAIを最初はどのように紹介すればよいですか？ そしてその後はどうしますか？ AIを人間のように紹介することのメリットとデメリットは何ですか？ 議論を円滑にし、イテレーションをスピードアップし、落とし穴を避けたいですか？ ワークシートを使用してください。 AIを使うときに新しいこと 「メンタルモデル」とは、何がどう作用するのか、そして自分の行動がそれにどのように影響するのかを、その人間がどう理解しているかです。人間は、プロダクト、場所、人々など、相互作用するすべてのものにメンタルモデルを形成します。メンタルモデルは、プロダクトができること、でき
検索 UI まとめてみた。｜あき
検索 UI を作る機会があったので、リファンレンスを集めた。あたまの整理をかねてパターン分け。 パターン一覧 1. フリーワード型 2. サジェスト型 3. グループ型 4. あとからフィルター型 5. 条件指定型 6. レコメンド型フリーワード型キーワードで検索。入力中に検索結果がリアルタイムに変わるものが多い。 良いところ シンプル。入力と同時に検索結果を表示できるので、最短で検索対象へたどり着ける。 イマイチ キーワードが間違っていると、対象へたどり着けないことがある。 感想 タスク管理やシンプルなファイル管理に多く採用されていた。 複雑な検索条件が不要。ユーザーが検索対象のキーワードを把握している場合に有効そう。見つける、というよりも、ショートカット的な役割に近い。サジェスト型キーワードを入力すると、検索候補が表示。 良いところ キーワードを正確に把握していなくても対象へたどり着け
ロービジョン「弱視」の人は、Webサイトをどのように使うのか？ ユーザー調査結果を公開 | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い
「ロービジョン」をご存知ですか？視覚障害という言葉を聞くと、多く人は、全く見えない「全盲」という状態を連想するかと思います。しかし実際には、視覚障害とされる方の中には、わずかながら見えるという方もいます。 わずかでも視力があるなら、眼鏡やコンタクトレンズで視力の矯正をすれば良いと思うかもしれません。しかし、矯正しても十分な視力が得られない人もいます。また、視野が狭い、視野の一部が欠けているなど、別の要因で見えにくい人もいます。 このように、矯正をしても見えにくい状態を「弱視」あるいは「ロービジョン」と言います。実は、視覚障害とされる方の6割が「ロービジョン」だと言われており、割合としては全盲の方よりも多いのです。 では、ロービジョンの方はどのようにしてWebを利用するのでしょうか？ この問いの答えは、一言で言うと「人によって異なる」です。先に述べたように、ロービジョンといっても見え方はさま
インタフェースデザインのお約束
デジタル製品のデザインに役立つ101の指針。製品のユーザビリティや性能を高める上で必須かつ基本のツボ、マスターすれば時間を節約し顧客満足度をアップできるテクニックが101のコンパクトなルールにまとめられています。メッセージが明確で説明もわかりやすいので短時間で気軽に読むことができます。101のルールは、タイポグラフィ、コントロール、カスタマージャーニー、各種要素の統一、UX全般に関わるプラクティスに分類されているのでリファレンス的に読むことも可能です。「よくある落とし穴」を巧みに回避し、自信をもってユーザーのために闘い、すばらしいユーザーエクスペリエンスを提供するプロへと成長させてくれる一冊です。 ●翻訳者による「日本語版のサポートページ」。 ●日本語版独自の8つの追加ルールが収録された「訳者あとがき」のPDF（6MB）。 というわけで、この長すぎる「訳者あとがき」では、原著者があげなかっ
Webサイトをダークモードに対応させよう
2020年10月16日 CSS, JavaScript ダークモードとは画面の背景を黒基調にしたデザインのこと。OS側での設定の他、人気アプリやWebサイトで続々対応されています。これまでは明るい部屋でモニターを眺めることが多かったのですが、スマートフォンの普及で暗い場所でも画面を見る機会が増え、夜間目に優しいダークモードが増えてきているわけですね。有機ELディスプレイでは省エネにもなるそうです。今回はそんなダークモードの設定を紹介します！ とにかく夜間見えづらい！ 私、夜間に車を運転していると、暗い所では対向車のライト以外ほとんど何も見えない状態なんですが、みんなそんなもんだと思ってたんですよね。でも話しているとどうやら私以外の人はライトじゃない部分もちゃんと見えていると…。みんな見えてるからちゃんと運転できてるってことか！こりゃー私には危険だわってことで夜間の運転はやめました。運転して
ダメなUXデザイナーが言いそうな10のセリフ
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 優秀なUXデザイナーについて書かれた記事はインターネットに多く存在しますが、本記事はそれらとは違います。今回は悪いUXデザイナーを見分ける方法について話したいと思います。 デザイナーが優秀かどうか見極めるのに役立つセリフを10個ご紹介します。 私はUXデザイナーなので、ユーザーにとって何が最善か知っています ステークホルダーよりも、チームメンバーよりもはるかに問題領域に詳しいと信じているデザイナーは少なくありません。ときにはユーザーより把握していると考える人さえいます。したがって、デザイナーが自分たちのソリューションに固執し、批評から逃れようとする状況がよく起こります。 理解しておくべきは、どれだけ長くデザイナーとして経験を積んでいようと、すべてのアイデアは仮説
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
任意の要素をドラッグ移動出来るようにする軽量スクリプト・「dragmove.js」
UXデザインが大事なのはわかるけど�エンジニアの私ができることってなんでしょう？�
