スマホにおけるボタンの配置、上と下、左と右、どのように配置するのが最適なのか詳しく解説
スマホでボタンをどこに配置するとユーザーは操作がしやすいのか？ 上部と下部、水平に並べたボタン、垂直に並べたボタン、3つ以上のボタンなど、ボタン配置について包括的な分析を行い、ボタンをどのように配置するのが最適なのか解説した記事を紹介します。 The Optimal Placement for Mobile Call to Action Buttons by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに グーテンベルクの原則 上部と下部のボタン 水平に並んだボタン 垂直に並んだボタン 水平と垂直のハイブリッド スティッキーボタン まとめ はじめに ボタンをどこに配置するかによって、ユーザーがタスクを完了する時間に影響を与えることを知っていますか？ タスクを素早く完了することで、より満足のいくエ
UIデザインのバグを減らすための施策
UIデザインにもあるバグ 今年の WWDC 2019 で印象に残っているセッションのひとつが「Introducing SwiftUI: Building Your First App 」。SwiftUI は開発がよりスマートにできるようになるだけでなく、デザインツールの新しい可能性を示しているように見えました。SwiftUI はとてもエキサイティングですが、個人的に刺さったのが上の写真。改めて意訳した図を作りました。 UI デザインは単に理想型を作れば良いのではなく、様々な状態（ステート, State）を考慮する必要があります。情報量に応じてどう見せるかだけでなく、様々な種類のエラーにどう対応するか考えなければいけません。How to fix a bad user interface で紹介されている UI Stacks のように、少なくとも 5 つのスクリーンデザインが必要になります。
はてなデザイナーの好きなWebサービス・アプリ（前編） - Hatena Design Group
こんにちわ。id:takuwologです。 はてなでは自社サービスの他にも様々なWebサービス・アプリのデザインを行っています。自分が携わっているサービスを好きなのはもちろんですが、それ以外にどんなWebサービスやアプリが好きなのか気になりませんか？ 僕は気になります！ そこで今回は、はてなデザイナーのお気に入りのWebサービス・アプリを紹介しようと思います。人数が多いので前編・後編と2回にわけてお送りします。 それではいってみましょう！！ id:ahchang の好きなWebサービス・アプリ このWebサービス・アプリの概要について簡単に説明してください ゲーマー向けボイス＆テキストチャット。パソコンブラウザ&アプリ/スマートフォンアプリ両方から無料で利用できます。 このWebサービス・アプリの好きなところと、自身に関するエピソード教えてください 遠く離れた複数人の友人たちと、ボイスチャ
「大規模なUI改修」を行うとどうなるか
アプリケーションを実装していくと、「大規模なUI改修」に遭遇することがある。 あちこちで見聞きした結果、以下のようなパターンがあるように感じたのでまとめてみた。 （UI改修なので基本的にフロントエンドからみた内容） これは一般的に「技術的負債」と呼ばれることが多いが、デザインの負債（UIを置く場所が無くなったり無くなったり、同じ概念のUIが分散したり）である場合も多い。 （ちなみに、デザインの負債は「ダイアログを多用する」とか、「最小画面サイズが大きくなる」とかの形で現れやすい） そして、デザイン負債に対応するために実装の困難なUIが増えるため、技術的負債も高くなる傾向がある。 （サーバサイドの技術的負債がDBの負債に起因する場合が多いことと似ているかもしれない）
今日からできるUXデザイン
2019/05/08に株式会社gumi様でプログラマ向けに行ったデザイン講義のスライドです。 難しく考えがちなUXデザインですが、今できることからやってこうぜって話です
これだけ守れば見やすくなるデザインの基礎
2019/04/18に株式会社gumi様で行ったデザイン講義のスライドです。 デザインとは何か？デザイナーは何を考えてデザインを作っているのか？ という話から、実際にデザインを評価・検討するための言葉を紹介しています。
色覚多様性 (色弱/色盲/色覚異常) の見え方確認ツールまとめ - UX INSPIRATION!
こんにちは、@h0saです。 「色覚多様性」という言葉をご存知でしょうか？ 2017年9月、日本遺伝学会が誤解や偏見につながりかねないわかりにくい用語を改訂しました。その中に、「色覚異常」や「色盲」を「色覚多様性」とするという発表がありました。 参考：色覚異常は“異常”じゃない？ 「日本遺伝学会」が新たな概念を提唱 | NewsWalker なお、カラーユニバーサルデザイン機構(CUDO)では、「色弱」としているようです。 参考：色覚の呼称 – 多様な色覚に対応したデザインと社会の改善 特定非営利活動法人カラーユニバーサルデザイン機構CUDO この記事では、以降「色覚多様性」という言葉を使わせていただきます。 上記CUDOの説明によると、色覚にはC型、P型、D型、T型、A型 の５種類があるそうです。C型は一般色覚者で、P型とD型は俗に言う「赤が見えづらくなる」色覚です。P型とD型を合わせる
UIでアイコンを使用するためのチェックリスト
アイコンは、GUIで最も頻繁に使用される要素の１つです。 どの様な要素があれば、よいアイコンなのでしょうか？ この記事ではあなたが使うアイコンがユーザーにとって機能するものとなるための簡単なチェックリストを紹介していきます。 １．認識しやすい 明瞭さは、優れたインターフェイスにおいて最も必要な要素です。しかし残念なことにそうでない場合が多々あります。 アイコンは何よりもまず意味が伝えられないといけません。アイコンが何を表しているのかが不明瞭な場合は、その意味がすぐに失われ、視覚的なノイズにしかなり得ません。 アイコンの優れているところは、ラベルを読まなくても意味が理解できるということです。 簡単なルールに従えば、意味が伝わらないアイコンの使用を避けることができるでしょう。 ユーザーになじみのあるアイコンを使用する ユーザーのアイコンへの理解は過去の経験に基づいています。 特殊なものではなく
ソリッドとアウトライン、どちらのアイコンが認識しやすいか
アイコンのスタイルをソリッドとアウトライン、どちらを使用するか決めなければならない場合がありませんか？ 好みで決めるという人もいるかもしれませんが、それぞれ分かりやすい場合と分かりにくい場合があります。 どのような場合にソリッドを使い、アウトラインを使うとよいのかを紹介します。 ちなみに下記は、左が過去のデザイン手法、右が現在のデザイン手法です。 Solid Vs. Outline Icons: Which Are Faster to Recognize? by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 アイコンのスタイルがユーザビリティに与える影響 アイコンにおける特徴的な手がかり アウトラインアイコンが速い場合 ソリッドアイコンが速い場合 スタイルに違いがない場合 ボタンとしてのアイコンを使用す
UI/UXが無意識に検索行動に与える影響について
10. メルカリのSearch Engineering Team Search Algorithm Engineer : - Akira Ishino 石野 明 from Google - Kenji Sugiki 杉木 健二 from 楽天 - Ypeng Lyn from monotaro and 楽天 - Riku Togashi 富樫 陸 from Yahoo - Kei Yagi from 八木 圭Yahoo - Hiroaki Shiino 椎野 弘章 from Yahoo - Yusuke Wada 和田 悠介from Yahoo Search Platform Engineer： - Minoru Osuka 大須賀 稔 from Yahoo - Junpei Nishimoto 西本 純平 from Recruit Technologies - Marne Prasad
イージングの基本 | Articles | web.dev
自然界において、ある地点から別の地点に直線的に動くものはありません。実際には、物体は動くにつれて加速または減速する傾向があります。私たちの脳はこの種の動きを期待するように作られているため、アニメーション化するときは、これをうまく使う必要があります。自然な動きでユーザーがアプリに馴染み、全体的なエクスペリエンスの向上につながります。 まとめ イージングは、アニメーションをより自然に感じさせます。 UI 要素にイーズアウト アニメーションを選択します。 イーズインまたはイーズインアウトのアニメーションは、短くすることが可能な場合を除き、使用しないでください。エンドユーザーにとって動きが遅く感じられる傾向があります。 従来のアニメーションでは、ゆっくり始めて加速する動きは「スローイン」と呼ばれ、すばやく開始して減速する動きは「スローアウト」です。ウェブで最もよく使われている用語は、それぞれ「イー
サンフランシスコのUXデザイナーが体験した日本から学ぶべきUXとは デザイン会社 ビートラックス: ブログ
筆者は普段btraxのサンフランシスコオフィスで働くUXデザイナーだ。これまでに日本を訪れたことはまだ1度しかないのだが、今年の6月、日本に出張するチャンスが巡ってきた。 Suicaへのチャージからフードトラックでお弁当を買うことに至るまで、日本ではあらゆる購買体験の設計がとても優れていることを感じた。 また、普段生活しているサンフランシスコでの自然で気にすることのないようなやりとりが、いかに自分が「当然物事はこうなるだろう」と期待するメンタルモデルにいかに引っ張られていたかもわかった。 日本での体験はサンフランシスコでよりもはるかにスムーズ日本の人は明らかにサンフランシスコの人とは異なる独自のメンタルモデルを持っている。 滞在中に時々不便な思いをすることはあったが、地下鉄に乗ったりレストランで食事をしたりすることはサンフランシスコでの同じ体験よりもはるかにスムーズで気持ちのよいものだった
UIデザインは人の好奇心に依存している
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ##はじめに 私は普段、同居している81歳のおばあさんにiPadの使い方を教えたり、サポートをしています。 発端はとある２５歳男性に、PS4の使い方について教えてあげたことです。 彼はPSボタンを長押しして出てくるメニューの存在を知らず、スリープモードが存在することを知りませんでした。 ８１歳のお婆さんも以前、iPadの入力キーボードが左右に分割されてしまい、入力ができない問題に直面しました。これもまたiPadのキーボード右下にある、「キーボードを隠すキー」を長押ししてしまったことが原因でした。 以上の出来事から私は、UIデザインは人の
デザイン初学者がUIトレースを１ヶ月続けてみた｜きなこ
こんにちは、今回がはじめてのnote投稿になります！ タイトルにもある通り、今日はTwitterにて8月に行なっていたUIトレースについて感じたことをまとめていきます。 デザインの勉強を始めたばかりで、どうやって勉強しよう？と悩んでいる人や、最近だとCocoda!に登録してUIデザインの勉強をしてみようかな...と思っている人の参考のひとつにでもなれば嬉しいです。 あくまでも自分なりの見解であり初心者目線で書きますので、どうぞ暖かい目でご覧になってください...。(アドバイス随時受け付けてます！) そしてかなり迷ったのですが、この記事ではトレースしたものだけでなく、アウトプットしたものも全部載せます。プロのデザイナーさんが見たらツッコミどころ満載の作品ばかりだと思いますが、同じような境遇の方の励みになればと思って、、、、では目次です。 目次 1. UIトレースを始めたきっかけ 2. 最
【深く考えるシリーズ】メルカリの UI がダサい理由を考えてみた。｜あき - 良いもの作って正しく届ける
どうも、UIUX デザイナーのあきです。 先日、メルカリさんがIPOしましたね（IPOの申し込み落選してしまいました、残念）。 ところで最近、非デザイナーの友人から 「メルカリってデザインダサいけど、すごい人気だよね。何がすごいの？」 と聞かれました。 その際、「ちょいダサなデザインだけど、全部すっごいよ」としか回答できなかったので、今回はメルカリの UI について、いまさらですが考えてみました。 また最初に断っておきますと、この記事でお話しするのは「メルカリはダサくてイケてない」や「どこがダサいか解説する」ではなく、「戦略的にダサい UI を採用する勇気と洞察力がすごい」です。 メルカリ関係者の方、誤解招いてましたらごめんなさい。 深く考えるシリーズ 深く考える訓練。気になったことを一切ググらずに考えます。正解不正解ではなく、自分で結論を導き出す訓練。 正解を求める方、ここでお戻りくださ
UX（ユーエックス）ってなんだ？実際に活躍している人たちに聞いてみた（後編） | ウェブ電通報
ウェブ／アプリの重要テーマのひとつであるUXに関してのコラム後編になります。前編では、UXの意味に関して現場で活躍している方々にご意見をいただきました。 【再掲】アンケートに協力してくださった皆さん 【再掲】実施した４つの質問 ・「（あなたにとって）UXとは何か？」と聞かれたらどのように説明するか ・UXを考える上で大事にしているポイント ・UXを意識した象徴的な出来事（ご経験がおありの場合） ・UXについてどうやって学習／インプットをしているか この4つの設問をメールでお送りし、UXについての捉え方や設計の考え方をこの前編に、そして、過去の経験や知見に関するものを後編に分けてご紹介いたします。 ＊回答の中から4つほどピックアップをしております。 ＊回答の紹介順は順不同です。 ＊時々、私が回答に個人的に感動／共感し、レビューが長文になってしまっていますがご容赦ください。 【再掲】UXとは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
What is User Centered Design (UCD)? — updated 2024
私の考えるプロダクトマネジメントとUXデザインの関係
The Evolution of Alert & Notification System / Becks Japan #1
高齢者UIプロトタイプ検証の学び
