エラー (ユーザーのつまずき) をデザインで解決する | Accessible & Usable
公開日 : 2015年6月18日 (2021年2月2日 更新) カテゴリー : ユーザビリティ ウェブサイトの利用シーンでは、様々な局面でエラー (ユーザーのつまずき) が生じています。ユーザビリティテストをしていると、エラーに直面したテスター (ユーザー) はまるで自身に責があるような言動を見せることが多いのですが、実はユーザー側ではなく、デザイン側に問題があるケースが大半と言えます。 この記事では、エラーの種類を理解したうえで、どうデザインによって解決するかを、見渡してみたいと思います。 エラーの種類 D.A.ノーマン氏は、著書「The Design of Everyday Things」(日本語訳は「誰のためのデザイン？)」の中で、エラーには「スリップ (slip)」と「ミステーク (mistake)」の二種類があると述べています。 スリップ (slip) A slip occurs
WAI-ARIA 対応のアクセシブルなタブ UI を React で実装する
タブ UI のアクセシビリティ対応 この記事は、下記の点に留意してご覧いただきたい。 タブ UI におけるアクセシビリティ対応（主に WAI-ARIA）の参考実装であること React コンポーネントとしての機能性は二の次のサンプルであること アクセシビリティ実装についてのツッコミは歓迎であること ひさびさにPCキーボード的なアクセシビリティ対応が必要そうな性質のサービスを開発することになったので、コンポーネント単位でのアクセシビリティ関連実装を進めている。 React 実装 今回はタブ UI を題材に、React コンポーネントを実装した。 行うべき操作を見通しよくするために、タブ UI を <Tabs> コンポーネント1つで実装した。厳密には <TabList> や <TabPanel> などの要素を分解してコンポーネント化したほうが良いだろうが、今回は簡易実装としている。 キーボード
誰のためのデザイン？増補・改訂版を読んだ - ninjinkun's diary
自分が最初に元の誰のためのデザイン?―認知科学者のデザイン原論 (新曜社認知科学選書)（初版はPOETと呼ばれている*1 ）を読んだのは十数年前でした。4月に出たこの改訂版を読み返してみて、改めて感銘を受けました（そして内容をほとんど忘れていたのに気づきました）。 内容としては、エモーショナル・デザイン―微笑を誘うモノたちのために 、複雑さと共に暮らす―デザインの挑戦など後の書籍で検討された内容が盛り込まれて、ノーマン著作の集大成になっています。 自分がこの改訂版で注目しているのは、「6章デザイン思考」の追加です。 6章デザイン思考 正しい問題を発見するのがデザインである として、そのための手段としてデザイン思考が解説されます。 具体的にフレームワークとして取り上げられている人間中心デザインプロセスを見てみると、 観察→アイデア創出→プロトタイピング→テスト→観察… というサイクルになって
よくわかるマテリアルデザインの設計コンセプト | fladdict
iPhoneとAndroidではiPhoneのほうが良くできているが、iOSのフラットデザインとAndroidのマテリアルデザインでは後者の設計が優れている。マテリアルデザインは、デザインとエンジニアリングが高いレベルで融合していて、ロジカルで非常に美しい。 以下、自分の理解をまとめたメモ。 紙とインク マテリアルデザインは「ペーパー」と「インク」のメタファーでできている。 ペーパーの特徴 バーやボタンといった画面上のUIコンポーネントは、バーチャルな紙でできたカードと考える。また、このペーパーは1dpの厚さを持っている。 ペーパーは純白の矩形、あるいはシンプルな円形である。三角や星型といった複雑な形はとらない。そのような複雑な形状や模様はインクが担当する。 現実とことなり、このペーパーは自由に伸縮することができる。 マテリアルデザインにおけるレイアウトは、複数のペーパーを並べたり、重ねた
実践的なUXデザインとインタラクションデザインの考え方
3. 3 [社外] ・第9回マニフェスト大賞「ASK TOKYO」 ・クラウドを利用した3DCGデータ利活用実験「ARK」 (CG・VFX産業クラウド活用・高連携実証事業) ・Yahoo!クリエイティブアワード よるパネ部門「おやすみひつじ」 [社内] ・写真共有サービス「My365」 ・Pipul アバターエンジン ・ユーザ行動分析サービス「Growth Replay」 ・プッシュ通知配信/解析サービスSDK「Growth Push」 6. ■会社名 ：株式会社シロク ■所在地 ：東京都渋谷区円山町28-3 渋谷YTビル 4F ■設⽴立立 ：2011年年12⽉月1⽇日 ■資本⾦金金 ：5000万円 ■株主 ：株式会社サイバーエージェント 他 会社概要 沿⾰革 2011年10月： 個人プロジェクトとし
使いやすさをデザインする上で心掛けていること - Mackerel ブログ #mackerelio
こんにちは。デザイナーの id:murata_s です。Mackerelのリリース当初からMackerelの画面設計やUX、ユーザビリティなどのデザイン業務全般を担当しています。 今回は、主にエンジニアさんのためのツールであるMackerelをデザインする際に id:murata_s が気をつけている点を紹介します。ユーザーにとって必要な情報を分かりやすく伝え、迷わないデザインを施すにはどういった配慮が必要か、製品の振る舞いのデザインについてMackerelの事例を交えながら考えてみたいと思います。 Mackerelは言わばソフトウェアであり管理画面ですから、一般に言われるウェブサービスよりもツールとしての側面が強いサービスだと思います。雑誌の誌面ではなく、車のダッシュボードをつくっているようなもので、グラフィックデザイン的な情報設計の考え方が前提となりつつも、それに加えてプロダクトデザイ
webデザイン業界で「UI/UX」という言葉が流行った理由を現場視点から勝手に語る
Web業界で、「UI/UX」っつって、この２つが同列のように書かれることが多いのも、大いに違和感があるんだけどね。UXはUIよりも、はるかに上位の概念だろうに。さらには、Web上だけで済むような話では、まったくないし。 — い (@hii1969) 2014, 6月 2 ユーザーの体験において、UIにふれるのは、ほんの一部の時間だ。 「UI/UX」と並列に書いたら、「それは違うよね・・・」とみなされる風潮ではあると思うんだけど。 じゃあ、この違和感がある「UI/UX」という言葉はなんでうまれたんだろう？ なんでwebデザイン業界では並列に使われてきたんだろう？ そんな問いがふと頭によぎった。 同時に、自分の現場感覚でこの言葉が流行る理由についてもわかる気もした。 というわけでwebデザイン業界で「UI/UX」という言葉が流行った理由を、現場視点から書いてみようと思う。 ※なお、これは私（と
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Apple信者だったボクは気づくとiPhone嫌いになっていたんだが 〜iPhone 6 Plusへの苦悩の日々
