UIの色を変えただけで大量のクレームを頂戴してしまった話｜のなと
Webプロダクト開発をしていると様々な諸事情によりUI構成を変えたり機能を増やしたり減らしたりすることが多々あると思います。そんな時に避けられない事態として「UI変更に対するお怒りがユーザーからわんさか届いてしまう」ということがあります。今回はUI上の１要素の色を変えただけで虎の尾を盛大に踏んでしまった事件の話をしようと思います。差し当たりどういうUIをどう変えたのかを明示しておきます。変える前がこちら↓↓ beforeUIほんで変わった後がこちら↓↓ afterUIご覧の通り「作業カード」と呼ばれるコンポーネントの色を「緑＆黄」から「緑塗り＆緑枠線」に変更しました。「え、それだけ？」という声が聞こえてきそうですがそうなんです。それだけなのです。しかしここはレガシードメインのtoB SaaS。toB SaaSではUIの変更がユーザー業務への影響に直結するので軽微な変更を加えるのもハードルが
「UIの良さ」ってのはユーザビリティだけじゃないんだよ〜UNDERTALEのUI｜Yamashita Angelica
この記事には、ゲーム「UNDERTALE」のネタバレが含まれます。 ネタバレによってゲーム体験を致命的に損なう可能性が高い作品です。今後プレイする予定のある方は、ぜひプレイ後にお読みください。 UNDERTALE（アンダーテール）とは、「知る人ぞ知る」と言うにしてはあまりにも有名になりすぎたインディーゲームです。2015年にPC向けに開発され、現在はSteam、XBOX、PSVITA、PS4、Nintendo Switch…と、多くのプラットフォームで遊ぶことができます。 ほぼToby Fox氏個人で開発した作品でありながら、各メディアのGOTY（ゲーム・オブ・ザ・イヤー）に多数ノミネートされており、「メタルギアやマリオが出てくる受賞ランキングに個人開発ゲームが入ってるってどういうことだよ！！！！！？？？？！！！！！」と当時せっせとゲームスタジオで働いていた私は卒倒しそうになりました。 こ
ソシオメディア | ヒューマンインターフェース ガイドライン
ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション
「私たちは慣れに支配され、使いにくさに気づいていない」 UI研究者・増井俊之氏が語る“使いやすさ”の本質
機能とUIの進化はなぜ比例しない？ UI研究者に聞く、使いやすさの本質とUIのこれから 「私たちは慣れに支配され、使いにくさに気づいていない」 UI研究者・増井俊之氏が語る“使いやすさ”の本質 誰もが気軽に電子機器を持つようになった今、私たちの生活はデジタルの恩恵で確実に便利になっています。しかし、UIは“よりよさ”を求めた結果、期待した評価とは正反対の声が集まること少なくありません。 そこで今回は、慶應義塾大学環境情報学部の教授で、予測型テキスト入力システム「POBox」やiPhoneのフリック日本語入力システムの開発者であるUI研究者の増井俊之氏に、UIの本質についてお話をうかがいました。まずは増井氏がUIに関わることになったきっかけと、使いやすさの本質について。 UI研究に関わるようになった流れ ーー学生時代には電子工作やソフトウェアに興味をお持ちで、現在のUIにつながる研究は社会人
サブミット (送信) ボタンをデフォルトで無効化しない | Accessible & Usable
公開日 : 2021年10月14日 (2023年10月11日 更新) カテゴリー : ユーザビリティ / アクセシビリティ ウェブのフォームにおいて、サブミットボタンをデフォルトで無効化しておいて、ユーザーの入力不備がなくなったときにボタンを有効化する UI があります。たとえば、利用規約などの文書を読んで同意する旨のチェックを入れないと、あるいは、入力必須フィールドにすべて正しく情報を入れないと、ボタンがアクティブにならない、というものです。 サブミットボタンがデフォルトで無効化されているフォームの例。 このような UI は、アクセシビリティやユーザビリティの観点で、以下の問題があります。 そこに存在しているはずのサブミットボタンが使用できないことに対して、その理由をユーザーが理解できずに、混乱してしまう恐れがある。(ユーザーの側に誤っているという自覚がなくても、ちょっとした見落としや入
【フロントエンド初心者向け】ユーザビリティを上げるちょいテク
フロントエンドの開発が初めての人が意外と抜けがちな観点をまとめてみました。 初めにざっくりと概要を話すと「デザイナーが作るデザインでは表現しづらいもの」をまとめたものになります。 デザイナーが作るデザインは静的なものなので(たまにがっつりプロトタイプを作ったりもありますが)、いわゆる"状態"を表現するのが難しかったり抜けたりしがちです。 具体的に言うとローディング、Empty、エラーなどです。これらをよしなに補完できるフロントエンドエンジニアはデザイナーからもきっと「頼りになるぅ！」と思われること間違いないでしょう。 と言うわけでそんな例を紹介していきます。 今後も思いついたら追加する可能性が無きにしも非ず。 ローディングを出そう こう言うクルクルするやつとか こんな感じでシュインシュインするやつがあります。 基本的にユーザがアクションを起こした時に待たせる場合は必ず表示させましょう。 ロ
画面をデザインするということ - Qiita
この記事は社内の勉強会で話した内容を再編したものです。 私自身はPC/ブラウザ/スマホのアプリ開発をしている１エンジニアにすぎないのですが、対客や要件定義から開発、運用、そしてUIのデザインを担当しており、自分なりに伝えられるものがないかと試みたものです。 デザインとは デザインとは単に見た目だけの話ではなく、「ビジネス」と「ユーザーが得る体験価値」から始まり、それを実データと結びつけながら人の認知を通してどう見せるのかという作業です。 始まりの部分は最近だとUXデザイナー、終わりの部分はUIデザイナーとかグラフィックデザイナーとか呼ばれるような人の仕事です。そしてそれらを形にするのがエンジニアです。 画面を設計するまでの作業 ギャレットのUX5段階モデルに従って、どういったことを考えないといけないのか確認します。 （実際にUX５段階モデルを意識して仕事してるわけではありませんが、何かしら
はじめてのUIデザインを読んで実践したら多くの変化があった｜Funakoshi Kiyomi
「さあ、デザインするぞ！」 そう思ってmacに向かい、デザイナーなりたてホヤホヤの1年前の私はいきなり画面のビジュアルからつくり始めました。情報設計せず、最初からワイヤー書いて、色をつけていく…。今思い返すと失神しそうです😇 デザイナーになりたての方、もしくはデザイナーになろうとしている方のなかには「デザイナーはイケてるデザインを作るのが仕事」と思っている方も一定数いるのではないでしょうか。(決して間違ってはないけどね！) でも私は今こう思っています 「良いインターフェースは見た目から始まるわけではない」と。 今回は「はじめてのUIデザイン」を参考に自分が歩んだプロセスをしっかりと文字にして残しておきたい&私の経験が誰かの役に立てたら、と思いこの記事を書いています。 さ！前置きはこれくらいにして始めよう💨 [目次] 1.「はじめてのUIデザイン」について 2.私がデザインを担当したプロ
ダメなUXは「時間ドロボウ」人間中心のデザインプロセスによる、業務システムの進化 | SELECK [セレック]
〜人間中心デザイン、UX、UIとは何か？について徹底解説した事例〜 Webサービスやアプリでは、UXデザイン、UIデザインの重要性への認識は一般的となった。しかし、同じITの世界でも未だそれが浸透していない分野がある。小売や流通業界で使われる業務システムがその代表だ。 一般的な業務システムは、人間中心のUXデザイン視点でのレビューが行われないまま開発がすすんでゆき、開発の後工程になってはじめてデザイナーが関与するというプロセスになりがちだった。 その業務システムの分野に、「人間中心デザイン」という視点を持ち込み、改革を起こしているのが、株式会社アストロ数理ホールディングスでCDO（チーフデザインオフィサー）を務める、久保 信介さんだ。 あるべきUXを実現するため、開発段階よりも前の要件定義時に極めて最終製品に近いモックアップを作りあげ、すばやくフィードバックとブラッシュアップのサイクルを回
![ダメなUXは「時間ドロボウ」人間中心のデザインプロセスによる、業務システムの進化 | SELECK [セレック]](https://cdn-ak-scissors.b.st-hatena.com/image/square/4ec8de45fc6ac028feae5905e56859887d8ed101/height=288;version=1;width=512/https%3A%2F%2Fdpd29bjwmgbr8.cloudfront.net%2Fwp-content%2Fuploads%2F2016%2F06%2F24200115%2F24395065-0cda-4f64-8b4b-0258aa53a92c.jpg)
スタートアップ UX設計の舞台裏 ~ペルソナ・カスタマージャーニーマップ編~
Housmartの高松です。 みなさんのサービスはUX設計をしっかりと出来ていますか？ 現在カウルでは、さらなる使いやすいサービスを目指してUXの再設計を行っています。 今回はその一部として行ったペルソナの定義、カスタマージャーニーマップの作成などを具体例をもとにご紹介します。 実際のサービス設計では結構抜けてしまいがちなUX設計のフェーズ。ペルソナやカスタマージャーニーマップなど知識としては知っているけど、自分のサービスで実践をしたことがない！という方も多いのではないでしょうか。 カウルのサービス カウルはスマホで簡単にマンション探しが出来るサービスをWebとiOSで提供しています。 ユーザは会員登録後、欲しいマンションの条件を登録するとおすすめのお部屋の提案を受けられます。おすすめのお部屋を見てお気に入りに入れたり、実際に見学の予約をすることもできます。 その他にも購入にかかる費用のシ
エアコンのリモコンが高齢者に難しすぎる定期
高齢者向けのエアコンのリモコンあるじゃん？あれでも全然ダメ。 エアコン効きすぎてるからって暖房つけたり、暑いからって即18℃に設定したりするのよ。 涼しい、少し涼しい、少し暖かい、暖かいの4つくらいのボタンにしておくべき。 そんで夏場は暖かいボタン使えなくするとかして。 家電メーカーの人高齢者の面倒見たことないんじゃないの。
傘を持っていくべきか答えてくれるLINE Botを作ってみて分かったこと - noriaki blog はてな出張所
忙しい人のためのサマリ 「傘を持って行った方が良いか」教えてくれるLINE Botを作ったので、コミュニケーション設計として重要だった3つの考え方を書きました。「入力方法」「返答方法」「名称やキャラクター設定」を考えたら、コミュニケーションプラットフォームでBotサービスを作るときに大切にしたいことが分かりました。 カサいる？ LINEのBOT API Trialを利用して、「カサいる？」というBotを作ってみました。 画像にあるとおり、LINEトークの基礎機能である「位置情報を送信」すると、傘を持っていくべきか（その地点に今雨が降っているか、1時間の間に傘が必要なくらい雨が降るのか）を教えてくれるもの*1です。 よかったら試してみてください。 （LINEアプリ内のQRコードによる友達追加から上の画像を読み取ってみてください） というBotサービス紹介だけでは申し訳ないと思うので、ここでは
iPhoneの日付を1970年に設定すると壊れる理由（と自分で直す方法）が判明
iPhoneの日付を1970年に設定すると壊れる理由（と自分で直す方法）が判明2016.02.15 20:0114,721 scheme_a 直せるからって、やっちゃダメですよ！ コロッサル・ケーブ・アドベンチャーに隠された機能から、テスラの新型のライトショーまで、テクノロジーにはイースターエッグがつきものです。しかし、iPhoneには誰も望まないイースターエッグ、というかバグが隠されていたのです。試せばiPhoneがダメになるので、決して実行しないでくださいね！ 先週世間を騒がせたこの騒動の発端は4chanの投稿。5S以上のiPhoneで日付を1970年1月1日に設定すると、レトロなアップルロゴが表示されるというものでした。 実際に試すと、iPhoneは起動画面で止まってしまいます。当初はジーニアスバーでも解決できず、交換せざるをえないと思われていたのですが、実は解決法がありました。それ
naoyaのはてなダイアリー - onsubmit で submit ボタンを disable にしてユーザビリティを良くする
先の Yahoo! Shopping のアプリケーションで、今度ちょっとやってみようと思ってたことを実装してみた。 http://bloghackers.net/~naoya/ys/app.cgi ボタンを押したときに、そのボタンが disable になります。この方法を使うとボタンが押されて次の処理に入ろうとしているというのが直感的に分かるのと、二重送信防止にもなるということでユーザビリティが改善できます。 仕掛けはすごく簡単で、form の onsubmit ハンドラに、その form に紐づく submit ボタンを disable になるような JavaScript を登録しておくだけ。 function disableSubmit(form) { var elements = form.elements; for (var i = 0; i < elements.length;
［速報］Googleが新しいUXの体系「Material Design」を発表。あらゆるデバイスとスクリーンに適用。Google I/O 2014
［速報］Googleが新しいUXの体系「Material Design」を発表。あらゆるデバイスとスクリーンに適用。Google I/O 2014 Googleは6月26日（現地時間25日）、米サンフランシスコでイベント「Google I/O 2014」を開催。次期Androidの「L」とともに、今後Googleがあらゆるデバイスとスクリーンに適用する新しいUXの体系「Material Design」を発表しました。 基調講演では次期Androidの「L」が今日からデベロッパープレビューとして公開されると発表。AndroidのOSにはアルファベット順のコード名が付いており、次期AndroidはLから始まりますが、まだコード名はついていません。 Lでは、Androidのユーザー体験を最初から考え直した新しいUXの体系「Material Design」を採用。基調講演で行われた「Materia
業務システムに己のすべてを賭ける深さはあるか
株式会社プラムザ 代表取締役社長。システムコンサルタント。1998年に28歳で起業し、現在も現役のシステムエンジニア、コンサルトとして、ものづくりの第一線で活躍しつつ、開発現場のチームとそのリーダーのあり方を研究し続けている。 「俺の全てをぶつけさせてくれる器量はあるか？」 これは井上雄彦先生の名著「バガボンド」で、武者修行を開始したばかりの宮本武蔵が吉岡道場の当主清十郎に稽古を申込んだ際にぶつける言葉ですが、こうなってくると業務システムに己の全てをぶつけさせてくれる深みがあるか、知りたくなってきますね。 私は26歳くらいから、20年弱、延々と業務システムの開発を行っているわけですが、実際のところどうなのでしょうか。 最近のお仕事をちょっとご紹介しましょう。 以下に、お客様のご了承を得まして、目下開発中(7月β納品予定)のとある基幹業務システムの画面をご紹介します。 ■すべての基本はマスタ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「デザイナーいないんですか？」松屋の食券機のUIがどんどん悪化してきたがここに来て『極み』に到着した感が出ている
AbemaTV デザインのBefore & After
TechCrunch | Startup and Technology News
テレビのリモコンのUIってどうすればいいのだろう