タグ

UIとUXに関するstudydesignのブックマーク (13)

  • 見た目の美しさとアクセシビリティのパラドックス

    UX Movementの著者および創設者です。UXのベストプラクティスとスタンダード、さまざまなテクニックに関する知識を共有することで、よりよいデジタルの世界をつくり出しています。 すべてのインターフェイスにはユーザーが存在し、そのユーザーはつねに多数派と少数派によって構成されています。たとえば、大半のユーザーは正常な視力をもっていますが、少数派となるユーザーは何らかの視覚障害をもっています。 正常な視力をもっているユーザーが見るものと、色覚異常および低視力のユーザーが見るものとの間には大きな隔たりがあります。何らかの視覚障害をもっているユーザーはテキストが小さすぎたり色のコントラストが低すぎると、文字がぼやけて見えたり、要素がよく見えなかったりする傾向にあります。 アクセシビリティの目標は、多くの場合忘れられがちな少数派のニーズを満たすことです。しかし、少数派のニーズを満たした結果、多数

    見た目の美しさとアクセシビリティのパラドックス
  • 【2019年版】UIとUXデザイントレンド - baby-degu - Medium

    Scenery Illustration by J.HUAこちらの記事は、2018年12月に公開された『 2019 UI and UX Design Trends 』の和訳になります。 はじめに私たちは去年、モバイルUIデザインのトレンドについての予測をまとめました。今年はモバイルだけを対象とせずに、さらに深く掘り下げていきます。 モダンなデザインの一番のトレンドは前後関係のあるつながりの中にあります。そのため、一般化することができません。 この記事を読むことであらゆるツール、技術の進歩、またユーザー向けのプロダクトが実際にどのように機能なのか開発者が理解し、全てが上手くいくように感じるでしょう。 近いうちに、販売だけでなく、生産するものすべてを網羅するユニバーサルデザインの考え方を発展させて行くでしょう。自分で何か物事を行うためには、より良いデザインの選択が必要です。 国家としての印象さ

    【2019年版】UIとUXデザイントレンド - baby-degu - Medium
  • Refactoring UI

    Make your ideas look awesome, without relying on a designer.Learn how to design beautiful user interfaces by yourself using specific tactics explained from a developer's point-of-view.

    Refactoring UI
  • 破壊的なアクションをどうデザインすべきか

    赤いボタンは、通常のコールトゥアクション(CTA)に使用すべきではありません。ユーザーはそれを警告と捉えてしまうからです。赤いボタンは破壊的アクションのためだけに使用しましょう。警告をあまり感じさせない寒色系のボタンは、通常のCTAに適しています。 赤いボタンは、ほとんどのユーザーに警告を伝えますが、中には深刻に捉えないユーザーもいます。視覚的な合図を追加することにより、すべてのユーザーに対して、その警告をさらに強いものにすることができます。これは特に、色の違いが見えにくい色覚異常や視覚障害のあるユーザーに有効です。 警告信号をより強力にするために、確認画面に破壊的アクションを表すアイコンを表示しましょう。 たとえば、ユーザーが見慣れている削除のアイコンはごみ箱のアイコンです。このアイコンを目にしたとき、ユーザーは現在行っているアクションを削除と関連付けるのです。 画面上部に赤いストライプ

    破壊的なアクションをどうデザインすべきか
  • ユーザー体験の質を左右するナビゲーションのパターン6選

    アプリはアイデアから生まれ、目的によって具体化されます。私たち起業家やデザイナー、開発者の関心は、最初から最後までスムーズな行程に沿ってユーザーを誘導して、有益な体験を与えることにあります。 あるリサーチによれば、65%近くのユーザーは、アプリ体験が好ましくないブランドを否定的に感じています。したがって決定的に重要なのは、ユーザーが労力を使わずに自分たちの課題の解決策にたどり着けるよう、インターフェイスのデザインをシンプルにすることです。 Gerry McGovern氏は『Usability: Navigation is More Important than Search』という記事の中で、機械に詳しい70%のユーザーはリンクをクリックすることからタスクを始めている一方で、残りの30%は検索から始めていることを明らかにしました。 これを踏まえると、ナビゲーションがユーザー体験でとても重要

    ユーザー体験の質を左右するナビゲーションのパターン6選
  • 1冊は持っておきたい!UIデザインや人間の認知についてしっかり学べるデザインの解説書 -UIデザインの教科書

    UIデザインの考え方を学びたい、UIデザインを説明するためのロジックを学びたい、使いやすい・分かりやすいとは具体的にどうデザインすればよいのか、そんな人にかなりお勧めの一冊を紹介します。 UIデザインや人間の認知について知りたいことがすぐに分かり、役立つと思います。 UIデザイナーやディレクターだけでなく、UI制作に関わるすべての人にお勧めです。 書は2013年に刊行された「UIデザインの教科書」の新版で、2018年の最新環境にあわせて、構成および内容を全面的に書き直しされたものです。

    1冊は持っておきたい!UIデザインや人間の認知についてしっかり学べるデザインの解説書 -UIデザインの教科書
  • 課金 UI まとめてみた|あき - 良いもの作って正しく届ける

    売上を伸ばしたい。 課金率を伸ばしたい。 でも、難しい! コンバージョンするサブスク UI を勉強したかったので、いくつかのアプリをスクショ。あたまの整理にまとめたのでアップ。 Web の LPO はかなりノウハウ系記事がありますが、アプリのサブスク UI は、まだまだ少ない気がします。誰かの参考になれば嬉しいです。 まとめ内のコメントは個人的感想です。まだまだ勉強中なので、お気軽にご意見いただけるとうれしいです。 ※ スクショは少し前に撮影したものなので、一部古くなってるかもしれません。 UI パターン 1. ミニマム型 2. プラン比較型 3. 横スクロール型 4. リスト型 5. ロング LP 型 規約表示パターン 1. 固定表示型 2. 隠しスクロール型 3. フッター型 4. 遷移型 サービスパターン 1. 探索財 2. 経験財 3. 信頼材 UI パターン1. ミニマム型最低限

    課金 UI まとめてみた|あき - 良いもの作って正しく届ける
  • アニメーションを使った効果的なモバイルなトランジション例

    アニメーションはユーザー体験において重要な要素です。モバイルアプリ画面のトランジションにおいて、アニメーションで伝えられることはたくさんあります。メッセージ送信、設定画面を開く、チェックボックス、別ページへの誘導などはすべて画面のトランジションです。それらをアニメーションで表現することはユーザーのアクションを促進する効果的な方法です。 この記事ではデザインを引き立たせ、ユーザーとの意思疎通やアクションを促すような効果的なアニメーション事例をレビューしていきます。 システムステータスの表示 何らかのアクションをユーザーが行った際には、そのアクションを受け取り処理していることをビジュアルレスポンスで明確に示す必要があります。アニメーションによるフィードバックがユーザー体験において有益なケースがいくつかあります。 ユーザーの操作に対する「反応」をきちんと返しましょう。ユーザーはシステムがアクショ

    アニメーションを使った効果的なモバイルなトランジション例
    studydesign
    studydesign 2018/11/19
    俺が考えた最強のアニメーションを AffterEffect で作りこむデザイナー VS 実装の仕方がわからないアプリプログラマー
  • ユーザーを魅了する!UXデザインの正しいアニメーション完全ガイド 2018年版 - PhotoshopVIP

    海外サイト Medium で公開された The ultimate guide to proper use of animation in UX by Taras Skytskyi より許可をもらい、翻訳転載しています。 最近では、UIデザインのアニメーションで感動させたり、驚くせることは難しくなってきています。画面上でのやり取りを示したり、アプリケーションの使い方を説明したり、ユーザーの注意を向けるなど、実装テクニックはさまざまです。 この記事では、UXデザインにおけるアニメーションの基原則とルールをまとめてご紹介します。これからインターフェースデザインのアニメーションを作成したいというひとが、追加情報を探す必要がないよう、アニメーションのすべてをまとめた完全ガイドです。 アニメーションの持続時間とスピード 要素の状態や位置が変更されると、アニメーションの長さは、ユーザーに変更を通知し、

    ユーザーを魅了する!UXデザインの正しいアニメーション完全ガイド 2018年版 - PhotoshopVIP
  • ユーザー体験の改善・検証に使える海外UXツール16選【2018年版】 | UX MILK

    ConnorはAppseeのインバウンドマーケティングチームの一員です。ソーシャルメディアとコンテンツの熱意あるプロで、テクノロジーやアンドロイドについては何日間でも熱く語れます。 世の中には、たくさんのUXツールが存在します。複数の選択肢があることは良いことですが、選ぶときは一苦労です。アプリのユーザーが機能の多さに圧倒されてしまうことがあるように、UXデザイナーやプロダクトマネージャーがUXツールの多さに圧倒されてしまっているのです。 私は、もう少し簡単に最高のUXツールを見つけられるようにしたいと思っています。そこで、評判の良いUXツールをインターネットの隅々まで探し、デバイスごとに分類しました。この記事ではこれらの優れたUXツールを用途ごとに見ていきます。 定性分析ツール 「分析」という単語を聞いてほとんどの人が想像するのは、数字やチャート、テーブル、Googleアナリティクスのロ

    ユーザー体験の改善・検証に使える海外UXツール16選【2018年版】 | UX MILK
  • 明るいUI or 暗いUI? ユーザビリティから考えるUIの明るさ

    SeanはCodal社の技術ライターおよびリサーチャーです。UXデザインからIoTまで、様々な話題のブログを投稿しています。 UXUIの違いを知らない人に説明する最善の方法は、比喩を使って説明することです。UIが車の見た目だとすると、UXは運転の仕方です。またUI出会い系のプロフィールだとしたら、UXは出会い方です。これらの比較は違いを上手く表している一方で、UIの複雑性を軽視していることもあります。 UIとは、単なる塗装やTinderのプロフィールではありません。UIとは全体の環境です。ピクセルひとつひとつが重要であり、多面的な構造を持っています。私たちは、サービスのプラットフォームを選ぶときは全体の体験を最適化できるよう注意深く考えます。一方で、配色理論やレイアウト、タイポグラフィ、フォントの選択などの小さな要素については、数秒以上かけて考慮されることは滅多にありません。 そのため

    明るいUI or 暗いUI? ユーザビリティから考えるUIの明るさ
  • 読みやすさのデザイン備忘録 | 深津 貴之 (fladdict) | note

    noteのコア体験は、「読む楽しさ」と「書く楽しさ」だと考えています。 来ならコア体験は、調査でしっかりと導くべきものです。しかしアカデミックなUXとは異なり、実際のスタートアップ環境では時間とリソースに限界があります。このため調べながらも、走り出さなければなりません。 まず序盤はヒューリスティック(経験)ベースのデザインを行いつつ、調査やテストが可能なところから、裏づけやチューニングを行う流れになりそうです。 以下、「読書体験」における「可読性」のパートのメモ。noteチームにとりあえず提案する予定の諸々です(現時点では個人の見解です)。基的には「当たり前のことを、当たり前に」やる予定。「これもやっとけ」的なことがあれば、タイポグラファーの諸先輩の方々には、ぜひご意見をお伺いできればと。 書体をサンセリフ系に変えるべきか?デジタルでは、一般的にサンセリフ体の可読性は、ローマン体よりも

    読みやすさのデザイン備忘録 | 深津 貴之 (fladdict) | note
    studydesign
    studydesign 2017/10/03
    note 側で css の text-autospace: ideograph-alpha; に対応するとタイポグラファー的にはハッピー
  • 日本で働く外国出身UXデザイナーが考える、日本のUXやITが遅れている理由 | UX TIMES

    はじめまして、ZILMOO株式会社(www.juusando.com)のUXUIデザイナーのハフィドと申します。私はモロッコ出身で、日への留学、大手制作会社をへて現在の会社を立ち上げました。子供の頃からロゴデザインやグラフィックデザインの活動をしており、大学では哲学・心理学を学んでいました。現在は、UXUIデザインなどに携わっています。 また、東洋美術学校・日電子専門学校でUX/UIデザイン講師としても活動しています。 2014年からコミュニティ(UXUI Designers)を主宰し、イベントや勉強会などを定期的に開催しています。 Twitter:https://twitter.com/hafidbourhim Dribbble:https://dribbble.com/juusando UUDコミュニティ:http://uuds.peatix.com/ , https://www.

    日本で働く外国出身UXデザイナーが考える、日本のUXやITが遅れている理由 | UX TIMES
  • 1