タグ

uxに関するbc_rikkoのブックマーク (15)

  • Animation that matters — adding value to your interface

    We spend a lot of time refining digital experiences and animation is often an afterthought when it comes to building them. In reality, many designers have no animation experience and we animate based on what “feels right”. This feels right because it’s natural and it’s natural because it mimics our everyday interactions with the real world. On the other hand, we tend to add animations to digital p

    Animation that matters — adding value to your interface
    bc_rikko
    bc_rikko 2019/03/16
    UI/UXデザイナーのためのアニメーション原則/アニメーションの12の基本原則
  • Buttons shouldn’t have a hand cursor – Simple = Human – Medium

    This is part 1 of a 3-part series. Here’s part 2 and part 3. There’s a belief that the hand (pointer) cursor means clickable, but this is wrong and potentially problematic. The hand does not mean clickableIt’s no accident that browsers don’t give buttons (and other elements) a pointer cursor — it’s because they’re not meant to. See the following screenshot: Google’s search page on Chrome on Mac OS

    Buttons shouldn’t have a hand cursor – Simple = Human – Medium
    bc_rikko
    bc_rikko 2018/12/06
    pointerカーソルはリンク用。アフォーダンスはカーソルの種類でなく、見た目(hover時に背景色変更など)で提供されるべき
  • The ultimate guide to proper use of animation in UX

    Nowadays it’s hard to impress or even surprise with an interface animation. It shows interactions between screens, explains how to use the application or simply directs a user’s attention. While exploring the articles about animation, I found out that almost all of them describe only specific use cases or general facts about animation, but I haven’t come across any article where all rules concerni

    The ultimate guide to proper use of animation in UX
    bc_rikko
    bc_rikko 2018/09/26
    アニメーションのUXガイド
  • 権限の UX  |  Articles  |  web.dev

    PushSubscription を取得してサーバーに保存した後の自然なステップは、push メッセージをトリガーすることです。しかし、1 点注意しておきたいことがあります。push メッセージの送信許可をユーザーに求めたときのユーザー エクスペリエンス。 残念ながら、ユーザーに権限を求める方法をよく検討しているサイトはほとんどありません。そこで、UX の良し悪しを少しだけ確認しておきましょう。 一般的なパターン ユーザーとユースケースに最適な方法を決定する際の指針となり、役立つ一般的なパターンがいくつか登場しています。 価値提案 メリットが明白なタイミングで、プッシュ通知の購読をすすめます。 たとえば、ユーザーがオンライン ショップで商品を購入し、購入手続きを完了したとします。サイトは配送状況に関する最新情報を提供できます。 このアプローチが効果を発揮する状況はさまざまです。 特定の商品

    bc_rikko
    bc_rikko 2017/12/18
    “最悪なのは、サイトに到着してすぐにユーザーにパーミッションダイアログを表示すること”
  • UI / UX 学びまとめ

    夏、満喫してますか? 夜は何してる? フェス、ナイトプール、おうちでまったり、友達とビアガーデン……。ViViモデルが夏の夜にやりたいこと×メイクをまとめました。

    UI / UX 学びまとめ
    bc_rikko
    bc_rikko 2017/11/24
  • How to Speed Up Your UX with Skeleton Screens — SitePoint

    Want to learn UX from the ground up? Get an entire collection of UX books covering fundamentals, projects, tips and tools & more with SitePoint Premium. Join now for just $14.99/month. However well-designed your user interface may be, at some point or other, the people using it are going to have to wait for something to load. Photo: Marco Giumelli, “Waiting” A 2014 MIT study showed that humans can

    How to Speed Up Your UX with Skeleton Screens — SitePoint
  • フロントエンドエンジニアが意識しておきたいユーザビリティ14選 - tatsuyankmura

    デザイナー向けに書かれたユーザビリティの書籍や記事はたくさんありますが、実装者向けはあまりありません。そこで、これまでに私が実装をして、デザイナーに受けた指摘、配慮すべきと感じた点を中心にまとめてみました。 リンク・機能など 1. リンクや押せる箇所は気づいてもらえるようにする 便利な機能を実装しても、気づかれなくては意味がありません。リンクや押せる箇所などは、色が変わる、動くなどの変化を加えてユーザに気づいてもらえるよう配慮しましょう。 プロバスケットボールリーグ、Bリーグのサイト。タブですが、マウスオーバーしてもポインターが変わらず、反応もないので押せることに気づかないユーザもいるのではないでしょうか。 2. 画面最上部へ戻るボタンの設置 特に読み物系のサイトなど、画面が長くなる場合はページトップへ戻るリンクがあると便利です。スクロールで戻るのは意外と大変で手間がかかります。PCはブラ

    フロントエンドエンジニアが意識しておきたいユーザビリティ14選 - tatsuyankmura
  • http://www.ogura.blog/entry/2017/02/28/190245

    http://www.ogura.blog/entry/2017/02/28/190245
    bc_rikko
    bc_rikko 2017/03/01
    LINE関係なくUI/UXの勉強になった
  • progress-bars-vs-spinners-when-to-use-which

    How would you feel if you were waiting in line at the store and stood in the same spot for a long time? You would probably get frustrated and move on. Users find themselves in this situation when same they see a spinner on their screen a few seconds too long. Spinners Are Not For Long Load TimesSpinners don’t tell users how long the process will take to load. If you use it for long load times, the

    progress-bars-vs-spinners-when-to-use-which
    bc_rikko
    bc_rikko 2017/01/16
    4秒未満はスピナー、4秒以上はプログレスバー
  • Bye, Bye Burger!

    I exactly remember what I was doing when the news broke on March 15 — we were knee deep in the concept phase for moving towards a visible tab navigation and away from a burger menu in our Android Job Search App, when Google announced that a new bottom navigation will be added to the Android Material Design Guidelines. The news spread like wildfire through the Android community, including heated de

    Bye, Bye Burger!
  • Design Better Forms

    Whether it is a signup flow, a multi-view stepper, or a monotonous data entry interface, forms are one of the most important components of digital product design. This article focuses on the common dos and don’ts of form design. Keep in mind these are general guidelines and there are exceptions to every rule.

    Design Better Forms
  • UXを向上させる5種類のアニメーションの使い方 | 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

    UXを向上させる5種類のアニメーションの使い方 | UX MILK
  • 効果的なフォームをデザインする:構造、入力、ラベルおよびアクション | POSTD

    画像の出典:form-ux-tips あなたのアプリやサイトを利用する人々にはある一定の目的があります。そしてその目的を達成するために フォームに 記入しなくてはならないことがよくあります。Webやアプリにおいてフォームは、ユーザにとって未だに最も重要な 種類の操作 であるからです。事実、フォームは目的を達成するまでの 過程における最後のステップ と見なされることも多いのです。 フォームは目的達成の手段にすぎません。迅速に混乱なく、ユーザがフォーム入力を完了させられるようにするべきです。 この記事では、ユーザビリティテスト、フィールドテスト、視線計測(アイトラッキング)、そしてユーザからの実際の不満の声に基づく実用的なガイドラインを紹介します。 フォームの構成要素 一般的にフォームは以下の5つの要素から構成されます。 構造 。フィールドの順番、ページの外観、各フィールドとの論理的な関連付け

    効果的なフォームをデザインする:構造、入力、ラベルおよびアクション | POSTD
    bc_rikko
    bc_rikko 2016/05/24
    フローティングラベル便利そう!
  • UIデザイナーに必要なのは、決定力のあるデザインを作る能力 | tsublog

    最近、デザイナーに求められるスキルが多くて何を学べば良いかわからなくなってきた。と言う声を聞くようになってきた。 流行りの記事にいくつか目を通すと、デザイナーは「 経営者と対等に話せるコミュニケーション能力、ビジネスセンスを保有していて、イケてるグラフィックを作り、コードまでかけないといけない 」らしい。 スキルを多く保有している方が望ましいのは間違いない。 ただ、 現場デザイナー に最も大事なのは実装面での考慮事項が網羅されて考え込まれた「 決定力のあるデザイン 」を作る力だと思う。 サッカーで言うと、決定力は「 得点を決める能力 」として使われているけど、UIデザインにおいては「 実装面まで考慮された実装可能なデザインであるか 」という言葉として使っている。 魅せるデザインとフィージビリティが考慮されているデザインでは、かなり内容が異なってくるので、現場デザイナーとしては特にこのあたり

    UIデザイナーに必要なのは、決定力のあるデザインを作る能力 | tsublog
  • ITエンジニアがUI/UXを確実に学べるコンテンツ11選 - paiza開発日誌

    Photo by Dan Zen こんにちは。谷口がお送りします。 ここ数年、Webサービスの開発において「UI」「UX」という言葉がよく聞かれるようになりました。 「UI」とはUser Interfaceの略で、簡単に言ってしまうと、パソコンやスマートフォン等を操作する際のの画面表示やメニューに表示される言葉など、情報の表示様式や操作感のことです。 対して「UX」は、User Experienceの略です。UXは、ある製品やサービスを利用したり、消費した時に得られる体験全般のことを指し、個別の機能や使いやすさだけでなく、ユーザーが製品やサービスを利用したときに得られる利用体験、満足感の向上を目指すのがUXデザインになります。 ※UXとはISO 9241-210[2]において「製品、システム、サービスを使用した、および/または、使用を予期したことに起因する人の知覚(認知)や反応」と定義され

    ITエンジニアがUI/UXを確実に学べるコンテンツ11選 - paiza開発日誌
    bc_rikko
    bc_rikko 2016/03/28
  • 1