Solid Vs. Outline Icons: Which Are Faster to Recognize?
ソシオメディア | UITableView の衝撃
ひとつのデザインが事実上の標準となり、その後の基本パターンを変えてしまうことがあります。変わった後ではそれが当たり前となってしまい、その標準に始まりがあったことなど誰も気にしなくなるのです。また振り返ってみたとしても、それがなかった頃の感覚に立ち戻ることはできないので、もはや何がどう新しかったのかを実感することは難しいのです。 2007年に iPhone が発売され、その一年後に日本で iPhone 3G が発売されてから今日（2018年7月11日）でちょうど10年が経ちました。この10年間でスマートフォンやそのアプリを介したオンラインサービスは瞬く間に普及し、私たちのモバイルコンピューティング、コミュニケーション、ソーシャルメディア、Eコマースなどの態様が大きく変化したのは周知のとおりです。 iPhone のデザインは多くの面で新しいものでした。そしてその大部分がその後のスマートフォンの
イマドキのUIデザインには欠かせない! マイクロインタラクションを作るためのズルいCC活用テクニック(Adobe MAX JAPAN 2018発表資料) - ICS MEDIA
イマドキのUIデザインには欠かせない! マイクロインタラクションを作るための ズルいAdobe CC活用テクニック （Adobe MAX JAPAN 2018発表資料） ウェブやアプリで、マイクロインタラクションの需要が高まっています。ボタンタップ時やページ遷移時に、小気味よい演出を加えるのが粋というもの。UIにインタラクションとして動きを加えることで、操作方法を理解するヒントを与えられます。 2018年11月20日（火）に開催されたAdobe MAX JAPAN 2018（場所：パシフィコ横浜）にて、「マイクロインタラクションを作るためのズルいCC活用テクニック」と題して登壇してきました。本記事では、スライド資料をフォローアップとして共有します。 アーカイブビデオ 公式サイトにてアーカイブビデオも公開されています。50分の内容ですが、スライド資料から読み取れないことも解説してますので、公
より良い相対日時表記についての考察
ニュース系ウェブサイトの記事リストやソーシャルメディアのフィードなどでは、各記事の公開日時を相対表記で表現することがあります。「5分前」「3時間前」「きのう」というように、記事の公開からどれだけ時間が経過しているかを表現する形式です。具体的には、JavaScriptで記事のタイムスタンプをユーザーの閲覧時の日時と比較し、相対表記に変換することになります。一方、「2018年10月1日」のような形式は絶対表記と呼ばれます。各記事の個別ページでは絶対表記が採用されることが多いようです。 もっとも単純な相対日時の実装は、60分前までは「m分前」、24時間前までは「h時間前」、そしてそれより前は「d日前」というように、時間の単位どおり機械的に処理したものです。しかし私たちの日時の捉え方はカレンダーや時計のとおりではなく、もっと感覚的なものです。日時の相対表記を導入する意義は、正確に何時間何分前の記事
エラーメッセージはフォームのどこに表示するべきか
UX Movementの著者および設立者です。ユーザー体験のデザインスキルの開発を手助けしてよりユーザーフレンドリーな世界のために、このブログを創設しました。 フォームのどこにエラーメッセージを配置していますか？ ユーザーの期待する場所にエラーメッセージが置かれていないと、ユーザーはフォーム入力を完了できなくなってしまうかもしれません。 フォーム入力を間違えたら、ユーザーはそれを修正して送信し直すために、なにが間違っていたのかを理解する必要があります。フォームを完了しようと思っていたとしても、それがあまりにも大変であればユーザーは心変わりしてしまうでしょう。 フォームの上か、フィールドのインラインか エラーメッセージの配置場所でもっとも一般的なのは、「フォームの上」と、「エラーのあるフィールドのインライン」という２箇所です。どちらの配置場所が、ユーザーにとってより直感的でしょうか？ 調査に
邪悪なUIチェックポイント - その先へ
ハロー、@seto_hiです。 北海道で避暑をしています。 アプリ開発をしていると様々なコンバージョン率がKPIになることは多いですが、誠実さを欠いたUIを作ると数字がよく伸びることが稀によくあります。 そういったものは一時的な利益には繋がりますが、長期的な利益には繋がらないと考えています。 自分が今後そういったUIを作らないための予防線としてこの記事を書きます。 不利益の排除 ・不利益な動線を奥深くに隠す ・ユーザーが設定を変更する手間を増やす ・「メールマガジンの解除にはメッセージを送ってください」 ・「メールマガジンの解除にはログインが必要です」 ・過度に警告を表示する ・「この設定をOFFにするとアプリが正常に動作しなくなる可能性があります」 ・「本当にOFFにしてよろしいですか」 ・不利益な動線を目立たなくする ・不利益な動線のシグニファイアを消す ・スマートフォンならスクロール
使いやすいフォームとは、心理学の原則に基づいたユーザビリティの改善方法
Webサイトやスマホアプリでも、心理学はいたる所に存在します。 Facebookの通知に緊急のカラーであるレッドが使用されているのは、注意を必要としているのが理由です。また、Vogueのような雑誌ではロゴのタイポグラフィに十分な余白を備え、潜在意識に排他性を伝えます。 ユーザーのニーズ、習慣、行動、動機、感情を心理学の原則に基づき、ユーザビリティを重視したJotFormのフォーム設計について紹介します。 Hacking Usability with Psychological Principles この記事はJotForm Blogで公開されています。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JotFormではフォームのユーザビリティを改善するにあたり、シンプルであること、即時性、美しさの3点に注目しました。 シンプルで
ナビゲーションブラインドネス (navigation blindness) | Accessible & Usable
公開日 : 2018年7月29日 カテゴリー : ユーザビリティ / 情報設計 (IA) サイト共通ナビゲーション (グローバルナビゲーションやローカルナビゲーション) は、ウェブサイト全体または特定のコンテンツカテゴリーのアバウトネスを瞬時に伝え、ユーザーの情報探索行動を支援するはたらきがあります。ウェブサイト設計において不可欠な機能と言えますが、だからと言って「サイト共通ナビゲーションで導線を用意してさえいれば、それで十分」というわけではないかもしれません。 実際、ユーザビリティテストをしていて見られたケースをご紹介します。 例1 : シリーズに含まれる個別商品へのリンク 商品情報サイトで、商品の「シリーズ」(特定のコンセプトでまとめられた、複数商品群のグループ) を紹介する概要ページがあります。その概要ページの本文には、当該シリーズを構成する個別商品に関する簡単な説明がありますが、各
マイクロインタラクションとバレエ｜深津 貴之 (fladdict)
UIのモーションを考える時、よく脳内でバレリーナの動きを再生する。 妹がバレエをやっていたため実家の居間では、ローザンヌ国際バレエコンクールのビデオがよく流れていた。 ローザンヌは世界最強の若手バレリーナを決める大会だ。この番組はクロード・ベッシー女史というコメンテーターの、辛口実況がウリだった。彼女はパリオペラ座学校の校長先生でもあり、それゆえに評価のハードルが非常に高い。コンテストの登壇者は、ほぼ確実にベッシー先生に滅多斬りにされる。TVカメラのまえで泣きだすこともある。ある意味、登竜門であると同時に公開処刑の場でもあった。 そんなベッシー先生が珍しく大絶賛していたのが、2001年だか2002年に出場したミレナ・シドロヴァだった。（追記、ベッシーさん2002年引退してますね。ビデオで見てたから時系列がメタメタだった。2002年のコメンテーターは別っぽい）。 バレエに特に興味のなかった僕
UIパーツごとに閲覧可能なスマホアプリのデザインギャラリーまとめ
2018年5月11日 スマートフォン スマートフォンアプリ用のデザインでちょっと調べ物をしたくてギャラリーサイトを巡っていたのですが、以前見ていたサイトが軒並み404で表示されなかったり、更新がとまっていてしょんぼり気分…。そこで最新のアプリが掲載されていて、且つ見やすくパーツごとに閲覧できるサイトを集めてみました。 ↑私が10年以上利用している会計ソフト！ UI Movement アプリを触った時の動きを動画で掲載しているUI Movement。見た目だけではない使い心地も伝わってきます。メール登録すると週に一度更新のお知らせも届けてくれるようです。 Pttrns PttrnsではiOSアプリだけでなく、Android、Apple Watch用のアプリも紹介しています。有料登録するとより多くのアーカイブを閲覧できたり、検索ができるようになります。 MobileMozaic MobileM
バッドUIを改善する方法 ― UIの「5つの状態」を考える | POSTD
(訳注：2020/08/22、画像と動画が正しく表示されていなかったためリンクを修正しました。) こんにちは。このブログは12月にO’Reillyから出版予定の私の著書『 Designing Products People Love 』からの抜粋です。ぜひ本も読んでみてください。また、FacebookやTwitter、 Slackなどで活躍されている20人以上のプロダクトデザイナーにインタビューもしています。* 無味乾燥なUIを経験したことはありますか？ 何か が足りないと感じてしまうようなUIを作ってしまったことはありませんか？ もしそうであれば、使い勝手の悪いUIを経験したのだと思います。 使い勝手の悪いUIには進捗インジケータがありません。ユーザにどこで障害が起きたのか知らせてくれません。怖いエラーメッセージでも表示してくれれば、なお良いのですが。わずかなデータのみの奇妙なグラフです
2018年のフロントエンドエンジニア/デザイナーに知ってほしいAtomic Design - Qiita
目的 フロントエンドを開発する上でUIコンポーネントを区分する際に問題が起きました。 UIコンポーネントを区分せず、フラットに開発すると、1サービスで軽くUIコンポーネントが3桁ぐらい同一ディレクトリで無法地帯のように散乱されるのは想像に難くないでしょう。(事実そうなりかけて解決策を探した結果この記事を書いています それを解決するためにAtomic Designを参考にしようといくつかの方のAtomic Designのスライドショーを見ましたが、それらのスライドショーの内容の通りやっても上手く行かない事は明白でした。 調査した所、Atomic Designをフロントエンド界隈では使っている所はとても多かったです。 そんなに広まっている設計がこれほどまでに薄いものだとはどうしても思えなくて、原文を探し呼んだ所、とても重要な部分が他のスライドや記事では抜けている、または間違った解説をしていたの
Foursquare: A UX case study
Foursquare’s iOS app after tweaked experience of user journey I love Foursquare and have used it since I lived in Tokyo. After I moved to San Francisco, I was impressed that I could use it seamlessly. It helped me discover a new place anywhere in the world. Last summer, I also planned a trip to Portland with Foursquare but I realized a problem while using the iOS app. So I set out to explore featu
Button UX Design: Best Practices, Types and States
Buttons are an ordinary, every-day element of interaction design. Despite this, because buttons are a vital element in creating a smooth conversational flow in web and apps, it’s worth paying attention to these basic best practices for buttons. Also we’ll go over button types and states — important information you need to know to create effective buttons that improves the user experience. Best Pra
Menus And Buttons In Mobile Design - 45 Examples
Design Your Way is a brand owned by SBC Design Net SRL Str. Caminului 30, Bl D3, Sc A Bucharest, Romania Registration number RO32743054 But you’ll also find us on Blvd. Ion Mihalache 15-17 at Mindspace Victoriei contact@designyourway.net App menus are key to making an app work well. An app menu should appear upon interaction with a button or some other action. A well-designed menu UI will display
Backlogの改善でわかった A/Bテスト を失敗に導くアンチパターン5選 | 株式会社ヌーラボ(Nulab inc.)
※ 数字は仮のものですが、改善率は実際の結果と大体合わせてあります。 これらの結果から「基本的ではない機能を持つアイコンにラベルを合わせて表示すると、ユーザーの使用率が上がる可能性がある」ということがわかりました。特にウォッチ機能と編集機能の改善率の差にわかりやすく出ていますね。 現在はこの結果や更なるA/Bテストを基にしながら、他の画面の改善も進めています。 A/Bテストを失敗に導くアンチパターン 結局どっちがいいの？ A/Bテストサイコー！ なんでもいいからA/Bテストしたいぞ！ ……と言いたいところですが、実際はそう簡単ではありませんでした。やってみて初めて気付いたり、改めて実感した知見から、A/Bテストを失敗に導くアンチパターンをいくつか共有します。 アンチパターン 1: 仮説を設定しない 仮説は、テスト内容を決めたり、結果を評価する際の判断基準になります。テストを行う前に仮説を設
グロースとは学びを得ること - 後編｜Go Ando / PREDUCTS / THE GUILD
こんにちは、THE GUILDの@goandoです。 「グロースとは学びを得ること - 前編」の続きです。 後編ではグロースにおけるABテストの価値について、グロースに取り組む中で得た気付きと世界の動向をご紹介します。 正しいABテスト多くの方がご存知のABテストですが、時折見かけるのが「改善案Aと改善案Bの方法のどちらがより良い結果に繋がるかを検証」するための方法として利用し、更には全てのユーザーをランダムに50% vs 50%にスプリットして行っているケースです。 これは正しいABテストの利用方法ではなく、本来は「現在の仕様A(対照群)に対し別の仕様B(介入群)の結果を比較」する実験方法で、仕様Bのみを特定の条件でランダムに抽出した一部の対象に対してのみ行い、元の状態との比較を行うのが本来の活用方法です。 ABテストは統計学や疫学の歴史の中で成り立ったランダム化比較試験の方法に基いてお
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bootstrap Admin & Dashboard Template · CoreUI
The Blog | Welcome to Adobe Blog
GitHub - cgoldsby/LoginCritter: An animated avatar that responds to text field interactions
