UXに関するshirotorabyakkoのブックマーク (92)
-
shirotorabyakko 2024/02/14
-
もっとも注目されたUIデザインのテクニックの総まとめ
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 これまでの中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of the Best by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. 細いフォントは暗いカラーにする 2. 長いフォームは常にラベルを上部に配置する 3. ボタンのラベルは一貫性を保つ 4. 不要なテキストでフォームのUIを乱雑にしない 5. フォームはインタラクションの後、すぐにフィードバックを提供 6. 次のステップの情報を提供する 7. CTA用にカラーを1つ確保しておく 8.
-
-
-
実案件から学んだ、本当に役立つUIデザインの法則50 ユーザビリティチェックリスト総集編｜i3DESIGN Designers
「ユーザビリティチェックリスト」ということで、UIデザインの「あるある」を取り上げ、改善案とセットでまとめています。 今回は、10のヒューリスティクスをもとに分類してみました。10のヒューリスティクスについては、以前記事にまとめています。 具体的な事例を一緒に取り上げ、よりわかりやすく解説していますので、こちらもあわせてご覧ください。 また弊社ホームページにて、ユーザビリティチェックリストをダウンロードいただけます。こちらも合わせてご活用ください。 1. システムステータスの可視化（Visibility of system status）1-1. 入力項目が多いときはステップを分けるフォームの入力項目が多い場合は、項目をグルーピングして画面を分割しましょう。 フォームが長すぎると、ユーザーは入力を途中で辞めてページから離脱してしまうかもしれません。 その上で、ステッパーを設置して現在の進捗
-
気づいてもらえるUIとは～上手くいかなかった事例から考える、わかりやすいUI～｜ニッセイアセットマネジメント公式note
仕事や買い物などで、エレベーターを日常的に利用されている方は多いと思います。 ところで、エレベーターが到着するときに、音がするものがあることをご存じですか？ 実はこれ、「到着音」といって、「上に行くのか」「下に行くのか」を耳でも判断できるように工夫されているそうです（※1）。 ※1エレベーターのメーカーによって異なる場合もあります。 しかし、相変わらず乗ってしまってから「あっ、上（下）でしたね」と間違いに気づく方は自分も含めてよく見かけます。 以前、同僚数人に「エレベーターに乗るとき、音がするよね。何の意味か知ってる？」と聞いたことがあります。正解を答えられた人はおらず、音が鳴っていることにすら気づいていない人もいました。 せっかく工夫しても、気づいてもらえないのは残念ですよね。 ユーザーに気づかれなければ、いくら工夫しても意味がない筆者は、インハウスのUI（画面デザイン）・UX（顧客体験
-
サービスに求められるものを、6段階に分類する｜深津 貴之 (fladdict)
「サービスの体験をよくする」というのが、漠然としてどうすればいいかわからないとき、まずユーザー体験を6段階に分類するのをオススメします。 この図をベースに、 ・あなたのプロダクトの現状 ・やろうとする施策やアップデートが、それぞれどのレイヤーに属するかを見て、基本は低レイヤー（機能より）のものから、充足させてゆきます。 下記は、家を例にしたのユーザー体験です。 Lv 0. 存在しない家がない。寒い。そして何も解決してない。 Lv 1. 機能がある屋根と壁と床がある。とりあえず雨風がしのげる。色々と我慢すれば、まぁ生きていける。 Lv 2. 安全と安心地震で壊れない。水漏れしない、火災報知器がついた、ドアに鍵がかかるようになった。最低限の信頼性が担保できる状態です。 Lv 3. 使いやすい、わかりやすいまっとうに使えるか。家のなかで迷わない。生活導線が機能するか。キッチンや冷暖房などがスムー
-
-
プロのUIデザイナーに学ぶ！ UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.15
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第15弾は、ユーザビリティ・フォーム・ミニマルにデザインする弊害に関するデザインのテクニックです。 UI & UX Micro-Tips: Volume Fifteen. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ページ内リンクを効果的に用意する 2. ボタンのラベルは一貫性を保つ 3. 長いフォームは冗長な作業を最小限に抑える 4. 長いフォームは常にラベルを上部に配置する 5. 不要なテキストでフォームのUIを乱雑にしない 6. 特定のUI要素でミニマムな外観を避ける はじめに 次のプロジェクト
-
「使う人の“うれしさ”を広げたい」鉄道輸送計画システムのデザインに込めた人を想う気持ち｜東芝 UIデザイン
みなさん、こんにちは。東芝UIデザインチームでプロジェクトのマネジメントやディレクションをしている土肥です。 今回は、「使う人の“うれしさ”を広げたい」と題しまして、鉄道輸送計画システムのUX/UIデザインをご紹介しながら、デザイナーとして大切にしたことをお話したいと思います。 スジ屋って知ってますか？皆さんは、鉄道の時刻表がどのように作られているかご存じですか？ 普段から鉄道を利用している方でも、誰が何を考えて作っているのかご存じの方はあまり多くないのではないでしょうか。 鉄道会社には「鉄道を利用する人がうれしくなる時刻表を作りたい！」という想いを持って日々仕事をされている職員さんがいます。 その人は時刻表をダイヤグラムという折れ線グラフで表現するのですが、列車を表す一本の線をスジと呼ぶことから、この職員さんは「スジ屋」と呼ばれています。 ダイヤグラムの例この時刻表を作る仕事は非常に複雑
-
オーバーレイ過多： ポップアップの競合でより厄介になっている
実行中のタスクとは無関係な、サイトやブラウザが起動する大量のポップアップに、現在のユーザーは圧倒されている。 Overlay Overload: Competing Popups Are an Increasing Menace by Kate Moran on August 1, 2021 日本語版2022年3月2日公開 ポップアップ：90年代からの嫌われ者 1990年代から、ユーザーはポップアップを嫌っていたが、ポップアップは今もユーザーに嫌われつづけている。実際、アメリカの成人回答者452人を対象に我々が実施した調査で、ポップアップは最も嫌われる広告手段の1つだった。（2004年の同様の調査でも、まったく同じ結果が出ている。変わらないことはある、と確認できたのはいいことだ。ポップアップによって引き起こされる感情は否定的なものではあるが）。 我々は、長年にわたり、この強引な広告手段に対
-
ユーザの思考が辿れるようになるまで深くユーザを理解する――トラックメーカーで働く人々が使う道具を支えるUXデザイン | gihyo.jp
ユーザの思考が辿れるようになるまで深くユーザを理解する――トラックメーカーで働く人々が使う道具を支えるUXデザイン 三菱ふそうトラック・バス株式会社へ、IT系の1人目のデザイナーとして入社した三宅智子さん。事業を横串で支援するITプロセス本部に所属し、内製での新規開発や、業務効率化を行っています。デザイナーとして現場でどのような活躍をされているのか、お話を伺いました。 三菱ふそうトラック・バス株式会社三宅智子さん それまで、トラックメーカーのデザイナーといえば内装やトラック自体のデザインを行う職種でした。三宅さんはIT系の部署に所属するデザイナーとして、リサーチの計画から実施、UXデザイン、実装後のテスト、ローンチ後の対応までの領域を担っています。 三宅さんが入社したのは2016年。以前は、医療系のSaaSを提供する企業で、新規開拓営業や事業開発を行っていました。妊娠出産を経ても長期的に働
-
スティッキーヘッダー：より良くする5つの方法
固定ヘッダーが有益なのは、目立ちすぎず、コントラストが高く、アニメーションが最小限で、ユーザーのニーズに合っている場合である。 Sticky Headers: 5 Ways to Make Them Better by Page Laubheimer on April 4, 2021 日本語版2021年9月8日公開 定義 スティッキーヘッダー（または固定ヘッダー（persistent headers））は、ユーザーがページを下にスクロールしている間、Webサイトやアプリのヘッダーを画面上の同じ位置に保つためによく使われるデザインパターンだ。このパターンには部分的なスティッキーヘッダー（partially sticky header）というバージョンもあり、これはユーザーが上にスクロールを始めるとすぐにページトップに（再び）表示されるというものである。 スティッキーヘッダーが適切に表示される
-
デザインに活かせるフレームワーク20｜金 成奎
久しぶりのnote投稿です。今回は自分の勉強がてら、UX・情報設計・アジャイル開発など、デザインに関わる様々な局面で知っておくと役立つフレームワークを集めてみました。 有名なものからデザイン以外にも使えそうなものまで幅広く選んでいますので、気になるものがあれば改めて実作業に生かすなり、掘り下げて研究するなり、資料に生かすなりしてもらえると良いのではないかと思います。 （ちなみにここでいう「フレームワーク」とは共通して用いることのできる考え方や思考の型や枠のようなもので、いわゆるCSSフレームワークの類ではありませんので、その点ご了承ください） 1.UXの5段階モデル まずは有名なUXの5段階モデル。アメリカのUXデザイナーであるJesse James Garrett 氏が著書『Elements of User Experience（ウェブ戦略としての「ユーザーエクスペリエンス」）』にて提唱
-
これぞプロのデザイン！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 UI&UXデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 UI & UX Micro-Tips: Volume One. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. 装飾的な要素をたまに使うのは全く問題ありません 2. UIの要素は互いに区別できるようにする 3. シャドウはわずかな量があるだけで十分 4. 見た目的に分かりやすいフォントを選択する 5. パンくずはユーザーが理解しやすいようにする 6. 彩度の高いカラーは慎重に はじめに 次のプロジェクトのために効率的で美しいUIを作成するとき、デザインをすばやく改善するためにわずかな調整で済むことがありま
-
UIデザインのためのブックリスト（2020, 追記あり）｜yoshi_design
UXや認知科学のブックリストはおかげさまでかなり読まれていますが、そういえば「UIデザイン」のリストは作ってなかったなと思い至って本を探し始めました。手元の本を並べてみると該当する本はあまり多くなくて、関連する周辺の分野のものにも対象を広げることにしました。UIデザインと周辺分野との境界はハッキリと分かれるわけではないので、自分が作った他のブックリストとの重複があります。また、分野の明確な線引きはしていませんのでご了承ください。 UI（ユーザー・インタフェース）が関わる分野はかなり広いのですが、このリストでは主に、比較的新しい（と言ってもiPhone発表から10年以上経ちますが）「スマートフォン・アプリのUIデザイン」を念頭において選んでいます。パソコンのソフトウェアや情報システム、ウェブ（情報設計やウェブ・ユーザビリティーを含む）のインタフェース・デザインについては、すでに世の中に知見や
-
-
よりユーザーを中心としたデザインスプリントを考える
この記事はUX for the Massesからの翻訳転載です。配信元または著者の許可を得て配信しています。 Making 5-day designs sprints more user-centred もし１つだけ超常的な力が手に入るとしたらなにを選びますか？ 私なら未来を予見できる予知能力を選びます。想像してみてください。株式市場はもちろん、あらゆるギャンブルで大儲けできるだけでなく、プロダクトやアイデアが実現されるのかずっと前にわかってしまいます。たとえばFacebookやTwitterが世に出る前にそれらをつくることができます。フラットデザインが主流になるずっと前にそれをつくり出して、友達をあっと言わせることもできました。いつでもどのデザインがうまく行って、どのようなアイデアが成功するのかを知ることができるでしょう。時代遅れのデザイナーになることは決してなく、いつでもスーパーデザイ
-
UXデザインはじめの一歩 ーインタビュー技術を磨こう！
Copyright © 2004-2025 Impress Corporation. An Impress Group Company. All rights reserved.
-
ソシオメディア | ヒューマンインターフェース ガイドライン
ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
