入力欄のプレースホルダーの話をします。プレースホルダーというのは、フォームの入力欄で、ユーザーが入力するまでの間に表示されているテキストのことです。 書籍「Webアプリケーションアクセシビリティ1」では、「3.1 ラベルと説明」のところで、紙版にして約1.5ページの分量を割いて、フォーム入力欄のプレースホルダー（<input> 要素や<textarea> 要素の <placeholder> 属性）の問題点を指摘しています。 この本で指摘されているプレースホルダーの問題点は以下の3つです。 プレースホルダーの色が薄く視認しづらい プレースホルダーとフォームコントロールの値との区別がつかない フォームコントロールに値を入力したときにプレースホルダーの値が見えなくなってしまう Webアプリケーションアクセシビリティ さらに、Nielsen Norman Groupによる「Placeholders

弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 はじめに 人は見た目が9割 皆さん一度はこの言葉を耳にしたことがあるのでしょう。内面がどれほど素晴らしくても、外見がそれに見合わないと、なかなか本当の価値を認めてもらえないものです。 この話は人間だけでなく、アプリケーションにも当てはまります。どれだけ内容が素晴らしくても、見た目がイマイチだったり使い勝手が悪かったりすると、ユーザーに敬遠されてしまいます。(私は以前ネ⚪︎フリからア⚪︎プラに切り替えたのですが、使いにくく感じたため、すぐに元のサービスに戻しました) エンジニアの皆さん、優れた技術力を持ちながら、デザインが原因でユーザー離れを招いていませんか？そうならないよう

うめめ @beConjuror 親にLINEの使い方を教えていると、UIの意味が圧倒的に届かない層があることが再認識される。写真を送るアイコンは理解できず、パスワード入力の目のマークはわからない、ハンバーガーメニューは意味不明、スワイプ操作は異次元。そういえば自分はどうやってこれらのマークの意味に慣れたんだっけ...。 2022-08-27 11:21:05 うめめ @beConjuror 「うわぁ…！スライドしたらトークが消えてしまった！どうなっているんだこれは」みたいなこと、自分も過去に経験したはずなんだけれど、いつのまにかなんとか使えるようになっている。「IT機器利用センス」みたいなパラメータを知らない間に鍛えているのではないか。 2022-08-27 11:27:33

まっくん @Ldimidiatus Enterが改行で、Ctrl+Enterで送信するサイト VS Enterが送信で、Ctrl+Enterで改行するサイト 国際法で統一して欲しい

リンク レイルラボ(RailLab) JR東、みどりの窓口7割廃止 「話せる指定席券売機」導入拡大 | RailLab ニュース [配信：2021/05/11 15:41]JR東日本は2021年5月11日(火)、2025年までに管内のみどりの窓口を現在の7割程度まで削減すると発表しました。また... 388

こんにちは、株式会社カミナシでデザインエンジニアをしているショウです。 突然ですが、UI/UX デザインにおいて、「楽観的な更新」という言葉を聞いたことがありますか？あまり聞いたことがなくても、実は日常にたくさん存在しています。 例えば、 twitter や facebook のいいねボタン。いいねをタップした直後に色がつくのですが、実はサーバーへのリクエスト送信と UI 上のいいねの色付きが同時に発生しています。つまりサーバーからの通信結果を待たずに UI を更新しています。 他に、trello でタスクカードを隣の列に移動したり、iMessage や Facebook メッセンジャーでのメッセージの送信、Kindle アプリで途中までしかダウンロード出来てない本が読めることなども楽観的な更新です。 図：楽観的な更新を採用しない時と採用した時のメッセージ送信のUI （引用元） 楽観的な更

ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション

前回の投稿でAppleのFluid Interfacesについての論考しましたが、Fluid Interfacesが生まれた一つの背景として、ディスプレイの巨大化があります。 本稿では大画面化するディスプレイへのUIデザインの対応について、現在どの様な流れになっているのか、個人的に観測している中で考察している事をご紹介したいと思います。 巨大化し続けるディスプレイサイズ2007年に初めてiPhoneが世に出てから、現在の最新のモデルiPhone XS Maxまでのディスプレイサイズの変遷をまとめたのが下の図です。 初代iPhoneとXS Maxを比較すると、物理的なディスプレイ面積は約2.7倍大きくなり、ディスプレイの縦横比は約1.4倍縦長になっています。 iPhone Xから22%縦長化特に著しく変化したのが、iPhone Xが登場した事によってそれまで1.77だった縦横比が2.16まで

UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 デザインにピュアブラックを使うと可読性が低くなると知っていましたか？ 統計によると、「アメリカの成人の58％」がコンピュータ作業で眼精疲労を経験したことがあるそうです。デザイナーは使用する黒の色に注意を払うことで、目が疲れる可能性をある程度減らすことができます。 ピュアブラックの文字や背景 ピュアブラックの文字や背景と白の組み合わせは、ユーザーが文章を長時間読むとき目に不快感を与えることがあり、眼精疲労を招いてしまいます。 白は100％の明度であり、黒は0％の明度です。このように明度のコントラストが強いと光量に不均衡が生じ、ユーザーが明るさに順応しようとするために目が酷使されることになるのです。 この現象を実証するために、暗い部屋で明るい電灯を

動作環境 Windows(筆者環境), MacOS, Linux 社内でアプリ開発がありプロトタイプ作成のため色々ツールを探していたのですが、同僚が教えてくれたBootstrap 4 ベースのPingendoが良かったので紹介します。Pingendoのオススメポイントは主に以下の3つです！ ドラッグ & ドロップでUIパーツを配置 Bootstrap 4 ベースの豊富なUIパーツ アプリ内での高いカスタマイズ性 以下詳細を見ていきましょう。 ドラッグ&ドロップでUIパーツを配置 Pingendoの画面構成は以下のとおり。 画面左にUIパーツ、中央にプレビュー、画面下にコード（デフォルトでは最小化）、画面右はテーマという配置です。レイアウトは洗練されているので使う時は迷うことないかと思います。 私が感動したのは左のメニューからコンポーネントを配置する際の手軽さです。動画で見ればすぐ解るかと思

Atomic DesignとCSS設計 第1回 Atomic Designとは何か 「Atomic Design」という言葉を聞いたことがある人は多いかと思いますが、実際それがどのようなものなのか、理解しにくい部分があります。本記事ではAtomic Designについて学び、それをCSS設計に活かすにはどうしたらよいかを考えます。 はじめに Atomic Designという言葉を聞いたことがあるでしょうか。Atomic Designとは、デザインシステムを中心とした設計の方法について書かれた書籍です。 Atomic Design by Brad Frost 著者のBrad Frost氏は、書籍の内容をすべてWeb上で公開しているため、上記サイトで読むことができます。 Atomic DesignについてWebで検索していろいろな記事を眺めていると、このAtomic Designの設計思想がコ

2014.11.19 / UI 画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール Tomohiro Suzuki クライアントやディレクターから渡された画面遷移図を元にワイヤーフレームを作ってみると、後から足りない画面が次々に発見された、または画面内の情報がどこに繋がるのか分からないといった経験はありませんか？ この画面遷移図というものは本来は制作範囲の全体像と構造を明確にし、必要な画面というものを洗い出したりするものです。通常のWebサイトであれば、従来のような画面遷移図でも問題ないかもしれませんが、多くのインタラクションが発生するサービスの設計では複雑化しやすく、何度も情報を行き来して確認することになるため時間がかかります。 原因のひとつとして、画面遷移図では画面名のみを記載して繋げていくことになるため、必要な情報が不足していることが挙げられます。その結果、本来で

この記事は「#UI Design Advent Calendar 2015」第18日目の記事です。 スマフォアプリの普及により、UI デザインの需要は年々増しています。最近になってアプリの UI デザイナーとしてお仕事を始められた方も多いかと思います。UI デザインは、原則や関連知識の理解を深めることも重要ですが、ケーススタディとしてみることでスキルの習得も早くなります。 今回は、これまでユーザビリティの観点で監修したアプリ UI の中から、ユーザビリティテストのスコアリングが低くなる傾向のデザインパターンをご紹介します。それらは少し見直すだけでスコアが改善されるというのもまた特徴です。やってしまいがちな失敗 UI ケースの入門として、ご参考になればと思います。 スコアリングの指標 アプリ UI のユーザビリティ測定には、アクセシビリティや他の定義を考慮することもありますが、今回のスコアリ

UX Movementの著者、編集長。明快で効果的なデザインを愛し、ユーザのために日々奮闘しています。 メールアドレスは、もっとも間違いやすいフォームフィールドの１つです。 入力データにはさまざまな種類の文字による長い文字列が含まれているため、間違って入力してしまいがちです。これにより、ユーザーが間違ったメールアドレスを送信する可能性があるのです。 メールアドレス確認の問題 デザイナーは、メールアドレスの確認フィールドを追加することで、間違ったメールアドレスの送信を防ぐことができると考えています。メールアドレスの確認フィールドの追加で誤送信を何件か防ぐことはできるかもしれませんが、必ずしもすべてを防ぐことができるというわけではありません。 多くのユーザーは、メールアドレスの入力内容をコピーして、確認フィールドに貼り付ける傾向があります。これでは、ユーザーが間違ったメールアドレスを貼り付ける

ご年配の知人に「新しい筆王を買ったんだけどアップデートのお知らせというのが出て先に進めない」と言われて家まで行ってきたんだけど 筆王の配慮 vs それをかいくぐるご年配のバトルがなんかすごかったので参考に書き残しておこうと思った -- 筆王「アップデートするには新規登録かログインをして下さい」 知人「メールアドレスを入れたけどログインできない」 ぼく「新規登録してないのでログインはできないです…」 -- 知人「新規登録のメールアドレスの項目がエラーになる」 ぼく「メールアドレスの「@gmail.com」も入れないとだめです…」 -- 筆王「(女性の声)アップデートが完了しました」 知人「おーできた。この起動っていうボタン押せばいいんだろう？」 筆王「(女性の声)住所録を作成するには…」 ぼく「(めっちゃ音声で言ってくるしめっちゃ説明の画面が出てくる…これなら年配の方でも迷わなさそう…)」

この文脈では、「編集内容のキャンセル」という処理を続行しても良いかをユーザーに確認しています。続行に同意したい多くのユーザーは直感的に同じ表記の「キャンセル」を押したくなるでしょう。しかしそれでは編集のキャンセルが実行されません。 このキャンセルボタンが意味するのは、「『編集内容をキャンセルする』のキャンセル」なのです。つまり、ユーザーが望み通りに編集内容を破棄するためには、反対側のOKボタンを選ぶべきなのです。このような「キャンセルのキャンセル」は二重否定で意味がややこしくなるので避けなければなりません。 ここで「キャンセルのキャンセル」にならなければ良いということで、次のようにボタン名を変えてみました。 これでもう迷うことは無くなりましたか……？ 私はこの修正は誤りだと判断します。「はい」「いいえ」は結果を予想しにくい表現なので、ダイアログのアクションボタンに用いることはあまり適切では

アプリマーケティング研究所 > アプリ開発 > 男性が理解できない「女の意思決定」を可視化した「女ゴコロフレームワーク」とは。ネイルアプリ「ネイルブック」が語るアプリ運営の生体験談。 「ネイルブック」を運営しているスピカさんにお話を伺いました。女性心理を理解するための3ステップ「女ゴコロフレームワーク」とは？ ※株式会社スピカ 「ネイルブック」3代目ディレクター 正木友佳さん（初代ディレクターの川端さんにも同席いただきました） 「ネイルブック」が出来るまで。 「ネイルブック」について教えていただけますか？ 川端： 「ネイルブック」は、ネイル写真を共有するアプリです、現在は10名のメンバー（うち女性4名）で運営しています。 ダウンロード数については、2011年4月にリリースして、現在120万ダウンロードです。海外からのダウンロードもありますが、アクティブユーザーは日本のユーザーがほとんどです

こんにちは、デザイナーの小林です。 最近スマホデザインで、アプリデザインや、機能性を持たせたUIのデザインが求められることが多くなってきました。 Photoshopで幅640pxで作成後、実機で確認をするのですが、どうも文字サイズを決めるのに毎回迷ってしまいます。 「小さすぎるんじゃないか？」 「見出しと本文の違いがパッと見で分かるだろうか？」などなど… そこで普段見慣れているだろう、スマホのデフォルトの純正アプリや有名アプリの文字サイズを調べてみました。 検証方法 iPhone4S（古くてスイマセン）でキャプチャーとる Photoshopで上からテキストをトレース。（このときの文字設定の数値を記載しています。） ホーム画面 通話履歴 メール リマインダー メモ帳 ミュージック Google Chrome Facebook Twitter Youtube はてなブックマーク evernot