その「直感的なUI」、本当に直感的ですか？｜wentz
こんにちは。SmartHRのプロダクトデザイン本部でプレイヤー/マネージャーをしているうえんつ（@wentz_design）です。今回は何かと見かけることがある「直感的なUI」という表現について建設的な批判をしたいと思います。 まず、この記事は「直感的」という言葉自体を否定したり、その使用を禁止すべきだと主張するものではありません。「直感的」という概念には本質的な価値があり、ユーザー体験の重要な側面を表現しています。 私が問題提起したいのは、この言葉が具体性を欠いたまま無批判に使われている状況です。この記事を通じて、「直感的」という言葉の背後にある具体的な要素を言語化し、より効果的なコミュニケーションと測定可能なデザイン目標の設定を目指したいと思います。 「直感的なUI」という甘い誘惑新しい企画や開発プロジェクトが始まるたび、私たちは無意識にこの言葉を繰り返していないでしょうか？ 「このア
Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React applications.
Less code. More speedSpend less time writing UI code and more time building a great experience for your customers. import * as React from "react"; import { Box, Center, Image, Flex, Badge, Text } from "@chakra-ui/react"; import { MdStar } from "react-icons/md"; export default function Example() { return ( <Center h="100vh"> <Box p="5" maxW="320px" borderWidth="1px"> <Image borderRadius="md" src="h
Vue.js おすすめライブラリ 21選（おまけ+1） - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? どーも、8ビットエンジニアです。 今更感はいなめませんが、まとめます。 対象者 ・これからVue.jsを勉強する人 ・Vue.jsに興味がある人 ・npm or yarn をある程度理解している人 機能側 1. vue-chartjs vue-chartjsはvueのChart.jsのラッパーです。 再利用可能なチャートコンポーネントを簡単に作成できます。 デモ 公式ドキュメント 2. vue-fa Vue.js で使用するアイコンですね。 FontAwesome5 を使用しています。 公式ドキュメント 3. vee-validate
モバイルアプリに最適なボタンサイズと間隔とは
UX Movementの創立者、ライター。ユーザーに優しいユーザーエクスペリエンスデザインのスキルを読者の方が上達できるよう、UX Movementのブログを作りました。 あなたのユーザーはスマホアプリやモバイルサイトのボタンをちゃんと狙った通りに押せているでしょうか？ きちんと押せているかをユーザーのせいにする前に、ボタンのサイズや間隔が最適化されているかどうか確認しましょう。 ボタンが最適なサイズと間隔になっていないと、ユーザーが狙いを外したり、間違ったボタンを押してしまいます。この記事ではどの程度が最適かを見ていきます。以下の数値は、96DPIでのCSSピクセルを基準にしています。 ボタンサイズの基準 まずは基準となるサイズがわからなければ、ボタンのサイズが最適かどうかを判断できません。幸いなことに、ボタンのサイズと間隔に関するリサーチによって、高齢者を含むほとんどのユーザーに有効な
「コマンドプロンプトは黒い画面に文字がたくさん出て怖い」→「チャット風」にしてみた LINEみたいで「分かりやすい」と話題に
黒い画面に“コマンド”を入力して操作を実行する「コマンドプロンプト」。慣れていないと少しとっつきにくいその画面を、LINEっぽくすることで親しみやすくした「チャット風コマンドプロンプト」を実際に作ってみた人が現れ話題になっています。 プログラマーでITエンジニアのkenji（@kenjinote）さんが開発し、GitHubでソースコードなどを公開しています。 チャットでメッセージのやり取りをしているような見た目で、こちらがコマンド（命令文）を入力すると、返信のような形で内容が表示・出力されます。入出力がはっきり分かれていて見やすく、“相手側”がアイコン付きなのが、なんだかホッとします。なにより全体的にかわいらしい。 チャット風コマンドプロンプト（画像提供：@kenjinoteさん） 通常のWindowsのコマンドプロンプト このアイデアは、Web制作企業ビックリマークの代表取締役でエンジニ
【2024年6月版】管理画面のUIデザインにおける25の改善ポイント | ベイジのUIラボ～業務システムとSaaSのUIを考える
私たちの日常業務で使われる管理画面は、大量の情報と複雑な機能で構成され、利用難度が高い傾向にあります。検索性の乏しい管理画面の一覧から1つの情報を見つけるために、どれだけの時間を費やしているでしょうか。 1億円の工数をかけて開発した機能も、低品質なデザインでは、機能の存在に気付かれなかったり、間違って使われたりと、期待した業務コストの削減に繋がりません。これでは、1億円を捨てたようなものです。 使い勝手の良くないデザインは、ユーザーだけではなく、開発者にも悪影響を及ぼします。複雑な構造と分かりにくい操作体系の管理画面は、開発やテストの手間を増やし、その後の機能拡張も難しく、改修コストも増大します。 これらのリスクを抑えるためには、UIデザインの基本原則を理解し、適切に管理画面を設計することが重要です。 私たちは管理画面のUIデザインの改善やリニューアルを手掛けることも多いのですが、その経験
Neumorphism in user interfaces
The example we’ve made live in front of an audience in about 1h at our DoGoodS*!t design event.Last week we explored some potential new trends in UI design, with one particular trend gaining a lot of attention on both Dribbble and Instagram lately. This “New skeuomorphism” has been called by Jason Kelley Neuomorphism in the comments. I decided to skip the “o” and the name Neuomorphism came alive.
UI改善のためにエンジニアに仕様を構造化してもらったら再設計がめちゃくちゃ捗った話｜鈴木 健一 / PLAID & Ex.STANDARD
この記事はPLAID Advent Calendar 9日目の記事ですUI改善の前提理解、うまくできていますか？皆さんはこれまで着手してこなかった既存画面のデザイン改善をする時、どのように進めているでしょうか。 自分がプレイドで所属しているreBAISUというチームでは、タタキとして定義したスタイルガイドを旧来の画面に適用しながらUI改善する取り組みをしています。 取り組み方として、改善対象となる画面の仕様を理解しながら課題を見つけ、解決策を検討していく流れになるのですが、この仕様理解が難しいと感じていまして。 なんとか前提理解を促せる方法はないものかと検討した結果、対象画面の構成要素をひとつずつ紐解いていく方法で理解していく「デザインの逆行分析」という方法をとっていました。 デザインの逆行分析とは「リバースエンジニアリング」とも呼ばれる手法で、その考えをデザインでも応用しようというもので
#バッドデザイン賞2017
おり | ENTAKU @ori_io 人知れずサービスデザインの助太刀をする者｜主にスタートアップや新規事業のサービス立ち上げ時から、広義デザインをお手伝いして伴走するENTAKUとかいう会社の１人代表です。必ず要件定義から参画します。得意分野はUI設計・PdM等｜個人ブログ https://t.co/NN1pUx8Gbi https://t.co/yOilU0qHi3 おり | ENTAKU @ori_io 今年街中で見つけたバッドデザイン事例を勝手に表彰してみました。 #はてなブログ バッドデザイン賞を勝手にノミネートしてみた-2017年度版- - 酔いどれデザイン日誌 - Drunken Design Diary - ddd.entaku-guild.com/entry/bad-desi… 2017-12-06 17:05:37
むずかしすぎる！五輪大会ボランティア応募フォーム(神田敏晶) - 個人 - Yahoo!ニュース
KNNポール神田です。 いよいよ、東京五輪の大会ボランティア募集が開始となった。 『ブラックボランティア』などとネットでいくら言われようとも、ボランティアする側が納得していれば、それはブラックなボランティアではないと思う。母国の五輪のボランティアで得られる経験は、人生のうち、何度もあるものではないからだ。 ボクが1963年の東京五輪の聖火リレーを見たのは神戸市の兵庫区だった。たった２歳であったが、あの雨の日の聖火リレーは、しっかりと脳裏に焼き付いている。だからこそ、ボランティアでも五輪に参加したいと考えている。 1963年10月神戸市兵庫区上沢通3丁目 出典:神田友治撮影11万人のボランティアが必要とされている大会ボランティアが８万人（組織委員会）、そして、都市ボランティアが３万人（東京都）の募集が昨日（2018/09/26）より開始となった。それぞれの申し込みページが公開された。 大会ボ
【保存版】ワイヤーフレームに使えそうなSketch UIキット30選 | DesignSource
どうも、yohicです。 先日フリーのPSDをご紹介したんですが、そういえば最近Sketchばかり使ってるなあと思いまして。。。 最初はワイヤー描くときだけ使ってたんですが、だんだんデザインもこっちを使うようになってしまいましたね。 結局画像の加工するのでphotoshopが無いと全部はできないのですが、半分以上はSketchで完了してしまうのではないかなと。 どちらにしてもphotoshop使うなら、Sketchいらないじゃないという議論もあったのですが、そこはまた別の機会に書いてみたいと思います。 今回はワイヤーフレームを描くときに使えそうなUIキットを30個選んでみました！ スポンサーリンク webサイトのワイヤーフレーム まずはWebサイトのワイヤーフレームで使えそうなUIキットを10個ほど選んでみました。 01: Atomic Design Template Sketch Res
入力フォームのプレースホルダーを使ってはいけない
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
フラットデザイン： 起源、問題、フラット2.0のほうが望ましい理由
フラットデザインとは2012年ごろに広まったWebデザインのスタイルである。それは広く今も利用されているが、過度な利用は深刻なユーザビリティ上の問題を引き起こしかねない。フラットデザインによって発生するユーザビリティ上の最大の課題の1つに、クリック可能な要素のシグニファイア不足がある。フラットデザイン2.0は、それに対する優れた解決策を提供してくれる可能性がある。 Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users by Kate Meyer on September 27, 2015 日本語版2015年11月2日公開 フラットデザインは人気のあるデザインスタイルで、Webページのグラフィック要素に、光沢感や立体感という視覚効果を利用しないもののことである。それは多くのデザイナーからWeb
Misocaの新しい受発注機能がSketchでデザインされてる様子 - 弥生開発者ブログ
こんにちは、こくぼ @yusuke_kokubo です。株式会社ファントムタイプ @PhantomType から来ました。 ちょっと前の話ですが、宮城県の松島に行ってきました。ちょうど紅葉がきれいな季節でした。 写真は朝日を浴びる福浦橋です。 今回はMisocaの受発注機能がどのようにつくられているのか、という話をしたいと思います。 Misocaの受発注機能とは 皆さんMisocaと言えば「請求書を簡単に作れて取引先に送るところまでやってくれるサービス」というイメージが強いではないでしょうか？ 受発注機能ではそれに加えて、取引先とのコミュニケーションもサポートしています。 Misocaが掲げる「仕組みで世の中をシンプルにする」「事業者間の取引を最適化する」といったビジョン・ミッションを推進するための野心的な取り組みです。 受発注機能のスクリーンショット 例えば、取引先に見積書を送ったとしま
UXを向上させる５種類のアニメーションの使い方 | UX MILK
Nick Babich氏はソフトウェアディベロッパーです。大のテクノロジー好きで、UI/UXをこよなく愛します。彼のwebサイトはこちらです。http://babich.biz。 モーションはストーリーを伝えます。長く複雑なストーリーではなく、「今ここを見て下さい」や、「操作は正常に完了しました」などのシンプルなストーリーです。 しかし、アニメーションの目標は、ユーザーを楽しませることではありません。ユーザーが何が実行されているか理解し、より便利にアプリを使う方法を理解するための手助けするためにあります。このアイディアは、Zurbの記事にある次の言葉の中ではっきりと表現されています。 We’re no longer just designing static screens. We’re designing for how the user gets from those screens
UIとUXの違い、そしてUXについての考察 – Phantom Type Co. Ltd
どうも、こんにちは。こくぼです。 最近MisocaでUXを考えることが多くなってきました。 世間一般的にUIとUXが一括りにくくられていたのにぼくはずっと違和感がありました。 ここでは自分なりにUIとUXの違いについて考えていることを書いてみたいと思います。 UIとUXの違い ぼくは、UXで設計したことがユーザーの目に見える形になったものがUIだと思っています。例えば、文字や文章、アイコンや図、ボタンやテキストフィールド…などです。 とある画面があったとして… UXで考えること 「ユーザーがこの画面で期待することはなんだろう？」 「ユーザーは何を期待してこの画面にくるのだろう？」 「ここではユーザーどういう情報を入力させてどういうフィードバックを返すべきか？」 「この画面でユーザーに何をさせたい？」 実際には一画面だけではなく、複数の画面をつなげて一覧の流れとして考えることになります。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Setting「設定です」 Configuration「設定です」 Preference「設定です」／Options、Flags、Properties「俺が、俺達が設定だっ！」【やじうまの杜】
「丁目、番地が全角しか入力できない」「何の入力チェックでエラーが出ているのかわからない」みんながネットでイラつく#クソ入力フォーム選手権 開催中
Wirebase - Design Freebies
エロ漫画雑誌読み放題サービスのユーザー登録画面が画期的すぎてこれを考えた人は天才「才能が怖い」「入らなきゃ（使命感）」