タグ

UIに関するyogasaのブックマーク (178)

  • Google Mapsがレビュー数を伸ばすための取り組みとサービスデザイン考察記事|坪田 朋

    先日、グーグルが飲店検索で初のトップにという記事を見かけて、Google Mapsがどうやってレビュー情報を集めてきたのか、過去に書いた考察記事を公開しました。 UXリサーチ目的で、普段からデザインアップデート記録を残しているんだけど、Google Mapsのレビュー機能は2016年から頻度高く使ってきたので、実体験とコンテンツを増やしてきたのか考察をまとめた内容です。 Google Mapsのレビューを始めたキッカケ最初にレビューを投稿したのは2016年で、旅行前にGoogle Mapsで行きたい場所やお店を保存して、現地に行った時になんとなく写真と口コミを投稿したのがキッカケ。 初回投稿後にレビューを促進するコンテンツがメールで届くようになった当時Google Mapsのレビューはまだ認知度が低くメールのタイトルも実験中の雰囲気があった。特典という言葉に釣られてローカルガイドに参加し

    Google Mapsがレビュー数を伸ばすための取り組みとサービスデザイン考察記事|坪田 朋
    yogasa
    yogasa 2022/10/25
  • 2022年上半期、注目されたUIデザインのテクニックのまとめ

    デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIUXを改善するデザインの知識とテクニックを紹介します。 2022年上半期に公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2022 by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ダークにデザインする時はホワイトも和らげる 2. フォームのエラーは色だけに頼らない 3. ユーザーが選択したアイテムを目立たせる 4. 細いフォントは暗いカラーにする 5. 次のステップの情報を提供する 6. 最も重要な要素をより目立たせる 7. 検索ボックスの幅は広くする 8. 素早いアクセスは、ナビゲー

    2022年上半期、注目されたUIデザインのテクニックのまとめ
    yogasa
    yogasa 2022/09/01
  • 「UI悪すぎじゃない?」ハンバーガーのオンラインオーダーでオプションを選択していったらパテと玉ねぎ2本だけのバーガーが届いた話

    Tinnamon @casdtem 今日ショック過ぎてツイートも出来なかった…初めてShake shackでオンラインオーダーしたんだけど、バーガーの注文のとこで1枚目写真のようにオプションが並んでんのよ。全部入れて欲しいから全部選択するじゃん?いざべようと蓋開けてみたらバンズの間にパテと玉ねぎ2だけが入ってた😂😂😂 pic.twitter.com/1ORtqPMZDr 2020-12-06 20:47:57

    「UI悪すぎじゃない?」ハンバーガーのオンラインオーダーでオプションを選択していったらパテと玉ねぎ2本だけのバーガーが届いた話
    yogasa
    yogasa 2020/12/09
  • シャニマスのチェックボックスから見る色弱者の世界|謝罪P

    先日のアップデートシャニマスUI周りに色々と手が加えられた。 その中でも個人的に嬉しかったのは、ソートに関連するチェックボックスのON/OFFが見やすくなっていたことだ。 大多数のユーザーにとっては「まあ確かにね」くらいのものかもしれない。しかし私は「これでようやくまともにソート機能が使える」とひそかに歓喜した。一部のユーザーも共感してくれるのではないだろうか。 なぜなら私の目に映った変化は以下のようなものだったから。 チェックの光沢の有無でかろうじて判別していた(ひよこ鑑定士か?)この見え方の差異は、私が『色覚マイノリティ』、いわゆる『色弱者』であることに起因する。 『色弱者』って何?光(色)を感じる視細胞が何らかの原因により欠損、または十分に機能しないことによって色の見え方が一般とは違う人のことを、記事では『色弱者』という呼称で表記する。 日人男性の5%、女性の0.2%がこの色

    シャニマスのチェックボックスから見る色弱者の世界|謝罪P
  • 管理画面のUIデザインにおける20の改善ポイント | ベイジのUIラボ~業務システムとSaaSのUIを考える

    私たちの日常業務で使われる管理画面は、大量の情報と複雑な機能で構成され、利用難易度が高い傾向にあります。検索性の乏しい管理画面の一覧から1つの情報を見つけるために、どれだけの時間を費やしているでしょうか。 1億円の工数をかけて開発した機能も、低品質なデザインでは、機能の存在に気付かれなかったり、間違って使われたりと、期待した業務コストの削減に繋がりません。これでは、1億円を捨てたようなものです。 使い勝手の良くないデザインは、ユーザーだけではなく、開発者にも悪い影響を及ぼします。複雑な構造と分かりにくい操作体系の管理画面は、開発やテストの手間を増やし、その後の機能拡張も難しく、改修コストも増大します。 これらのリスクを抑えるためには、UIデザインの基原則を理解し、適切に管理画面を設計することが重要です。 私たちは管理画面のUIデザインの改善やリニューアルを手掛けることも多いのですが、その

    yogasa
    yogasa 2020/07/26
  • UI改善のためにエンジニアに仕様を構造化してもらったら再設計がめちゃくちゃ捗った話|鈴木 健一 / PLAID & Ex.STANDARD

    この記事はPLAID Advent Calendar 9日目の記事ですUI改善の前提理解、うまくできていますか?皆さんはこれまで着手してこなかった既存画面のデザイン改善をする時、どのように進めているでしょうか。 自分がプレイドで所属しているreBAISUというチームでは、タタキとして定義したスタイルガイドを旧来の画面に適用しながらUI改善する取り組みをしています。 取り組み方として、改善対象となる画面の仕様を理解しながら課題を見つけ、解決策を検討していく流れになるのですが、この仕様理解が難しいと感じていまして。 なんとか前提理解を促せる方法はないものかと検討した結果、対象画面の構成要素をひとつずつ紐解いていく方法で理解していく「デザインの逆行分析」という方法をとっていました。 デザインの逆行分析とは「リバースエンジニアリング」とも呼ばれる手法で、その考えをデザインでも応用しようというもので

    UI改善のためにエンジニアに仕様を構造化してもらったら再設計がめちゃくちゃ捗った話|鈴木 健一 / PLAID & Ex.STANDARD
    yogasa
    yogasa 2020/07/25
  • やめてほしいUIアニメーション

    最近はクオリティの高いアプリも増え、UIの見せ方も工夫されて昔より質の高いアプリが増えましたが、低コストで開発していくとUIアニメーションは後回しにされがちですよね。 開発時間や人員の問題、UIアニメーションをやる人がいないから自分がやった人など、UIアニメーションの優先順位が低いため、手探りでやっている方も多いと思います。 今回の記事では今出ているアプリに対してあれはダメだ!と言いたいわけではなく、リリースされているアプリを触って、自分が作るときはここは気をつけようと思ったり、これはアニメーションいいなとか、実際体感して勉強していけるため、その経験が業界全体を徐々にクオリティアップしていくため、結果は惜しいアニメーションだとしても挑戦した結果でもあると思うため大事なことだと思っています。 前置きはここまでにして、今回はアニメーションの中で、あれ?と思ってしまう、そんな「これはやめてほしい

    やめてほしいUIアニメーション
    yogasa
    yogasa 2020/06/18
  • アニメーションのスピードを同じにしてはいけないポイント

    こちらの3つのアニメーションはボタン押下後に小中大のウインドウを表示させていますが、大きさによってアニメーションを変化させています。 小さいものほど動きは早く、大きいものほど動きは遅くすることでより自然なアニメーションに見せることができます。 この動きがもし逆だった場合はどう見えるのかが下の画像になります。 小さいウインドウの動きはゆっくりに見え、少し鈍い感じを覚えます。 大きいウインドウでは素早く動くため視覚への負荷が大きく、衝撃、緊急性があるように見えます。 より良いアニメーションは現実の動きに近いアニメーションが自然に感じられるため、現実世界と同じように大きいものはゆっくり動き、小さいものは素早く動くことで自然な体験を得ることができます。 それでもユーザーへの待機時間を減らすためになるべく早くアニメーションを終わらせたい場合は途中から再生させることをお勧めします。

    アニメーションのスピードを同じにしてはいけないポイント
    yogasa
    yogasa 2020/06/12
  • UIの細かい動きについて

    イージングなしとあり 画像ではイージングがわかりやすいようにグラフを入れてあります。 横が時間、縦がスケール、点がキーが打たれていることを表しています。 UIごとのイージング UI素材ごとにどのような緩急の付け方が良いのか迷うかと思います。 ダイアログアニメーション以外に、画面遷移時のUIの動きやクエスト開始演出など様々なアニメーションを入れるたびにどのイージングが正解なのか、それについては正解はありません。 ゲームの色味やデザイン、世界観を知らずにアニメーションは付けられません。 また、UIがどこまで世界観を踏襲するのかで、システムのような動きにするのか、世界観に合わせた動きにするのかも変わってきます。 こういった部分は関係部署にコミュニケーションをとってどんなゲームを作りたいのかを把握し、イージングはどうするのかを考えていきます。 そして、予備動作やオーバーシュートが必要なのか不要なの

    UIの細かい動きについて
    yogasa
    yogasa 2020/03/10
  • 現代のモバイルゲーム開発者が向き合うべき ディスプレイ事情と、その対応方法

    はじめに 現代では多くの人々がスマートフォンやタブレットを所持し、ゲームを楽しんでいることと思います。 モバイル向けのゲーム市場は大きく、世界では今も多くの開発者たちが iOS / Android 向けの商用ゲームを作っています。 さて、モバイルゲームの開発には、多くの開発者を悩ませるちょっと困った事情があります。 それは ディスプレイが非常に多くの多様性を持っている ことです。 正方形に近い形のタブレットもあれば細長い端末もあり、カメラがディスプレイの中に割り込んでいたり、 OS が専有する領域があったりと様々です。物理的な大きさもバラバラですね。 そのくせモバイル端末はタッチパネルで、ディスプレイに触れる UI になっているのです。 ゲーム開発を生業とする多くのエンジニア / アーティスト / ゲームデザイナーは、 これまでに何度も頭を抱えてきたことでしょう。 稿では、2019 年現

    現代のモバイルゲーム開発者が向き合うべき ディスプレイ事情と、その対応方法
    yogasa
    yogasa 2019/12/01
  • 三井住友銀行アプリについてお話します。|SMBC DESIGN

    こんにちは!三井住友銀行 デザイナーの堀と申します。 前回の初投稿から、SNSなど多方面でたくさんの反応をいただきありがとうございました。予想以上の反響で銀行内でも話題となり、三井住友銀行のデザイナーの活動が少しでも広がったことにうれしく思います。 その中で「銀行アプリが変わった」とのコメントを多くいただき、自分たちが関わったプロジェクトがお客さまの手元に届いているんだなぁと感動しました。 今回はその「三井住友銀行アプリ」について書いていきたいと思います。 題に入る前に…、お伝えしたいことがあります。 三井住友銀行初!2019年度グッドデザイン賞を取りました!!(ぱちぱちぱち) デザイナーだけでなく、たくさんの方々のご協力、お客さまの声から作られたアプリなので受賞したときは当にうれしかったです。 それでは題です。 アプリリニューアルの背景 様々な理由がありますが、まずはこれです。 キ

    三井住友銀行アプリについてお話します。|SMBC DESIGN
    yogasa
    yogasa 2019/11/19
  • はっきりと分かるようにデザインされたUIは、最高のUI

    多くのデザイナーが日々、使いやすいデザインについて模索しています。 WebページやスマホアプリのUIデザインにおいて、使いやすいデザインへの一つの答えとなる記事を紹介します。 すっきりデザインされたUIよりも、はっきりと分かるようにデザインされたUIの方が使いやすい最高のUI! The Obvious UI is Often the Best UI by Susanna Zaraysky 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 下部のナビゲーションバー = 使用率の増加 下部のナビゲーションバーとアクセシビリティ 「明白な」アイコンが「一般的な」アイコンとは限らない 他のUIをコピーしても、明白なデザインは保証されません 明白なものを見つけるには、問題点を見つけること はじめに フランスの哲学者ヴォルテールの言

    はっきりと分かるようにデザインされたUIは、最高のUI
  • デザインの参考になる!最近のスマホアプリで見かけるUI、インタラクションがまとめられたギャラリーのまとめ

    最近のスマホアプリで見かけるUI、レイアウト、コンポーネント、アニメーション、インタラクションなどがまとめられたギャラリ−を紹介します。 デザインのアイデアを探している時に、ブックマークしておくと便利ですね。 Mobbin 150種類以上のiOSアプリ、8,000パターンのUIがまとめられたギャラリー。一つのアプリで、さまざまなUIが収録されているので、非常に便利です。スクリーンはiPhone X対応で、気に入ったアイデアは保存することもできます(要サインアップ)。

    デザインの参考になる!最近のスマホアプリで見かけるUI、インタラクションがまとめられたギャラリーのまとめ
  • テレビリモコンってこのままでいいの? ゲームUIで考える、進化を促進するデザインとは - MdN Design Interactive

    皆様こんにちは。UIUX Lab代表の鷲山です。ゲームUI/UXの魅力をお伝えする連載第四回目は、一度ゲームの世界を飛び出して日常のプロダクトに目を向けてみたいと思います。ユーザーに分かりやすいUI設計についてはこれまでにも述べてきましたが、それはゲームに限ったことではありません。使いやすいUI作りの重要性はすべてのプロダクトに言えることです。 利用シーンが違えばゲームとは違う答えが導き出されることもありますが、ゲームUIで読み解くことで日常のプロダクトをもっと便利にすることはできないか? 今回はそんな視点で身近な家電製品のUIについて考えていきます。 2019年8月16日 解説:UIUX Lab代表 鷲山優作 TEXT:編集部 ▶ そもそもゲームとは? 私たちはゲーム作りの現場で、日々少しでも解りやすくユーザーを迷わせない、ストレスを与えないUIづくりに取り組んでいます。 逆説的に聞こえ

    テレビリモコンってこのままでいいの? ゲームUIで考える、進化を促進するデザインとは - MdN Design Interactive
    yogasa
    yogasa 2019/08/17
    こう言うのって10年以上前から見るけど旧来のリモコン駆逐するどころか普及してるようにも見えないので市井の人々に受け入れられてるの?UIマンの独りよがりにしか見えないんだが。
  • TechCrunch

    Two of the biggest drivers of growth on social and e-commerce platforms have been food and influencers, so it should come as no surprise that startups are now getting in on the act in trying to combin

    TechCrunch
    yogasa
    yogasa 2019/08/13
  • Engadget | Technology News & Reviews

    The Biden Administration opens $285 million funding for ‘digital twin’ chip research institute

    Engadget | Technology News & Reviews
    yogasa
    yogasa 2019/08/13
  • スマホにおけるボタンの配置、上と下、左と右、どのように配置するのが最適なのか詳しく解説

    スマホでボタンをどこに配置するとユーザーは操作がしやすいのか? 上部と下部、水平に並べたボタン、垂直に並べたボタン、3つ以上のボタンなど、ボタン配置について包括的な分析を行い、ボタンをどのように配置するのが最適なのか解説した記事を紹介します。 The Optimal Placement for Mobile Call to Action Buttons by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに グーテンベルクの原則 上部と下部のボタン 水平に並んだボタン 垂直に並んだボタン 水平と垂直のハイブリッド スティッキーボタン まとめ はじめに ボタンをどこに配置するかによって、ユーザーがタスクを完了する時間に影響を与えることを知っていますか? タスクを素早く完了することで、より満足のいくエ

    スマホにおけるボタンの配置、上と下、左と右、どのように配置するのが最適なのか詳しく解説
    yogasa
    yogasa 2019/08/01
  • これだけ守れば見やすくなるデザインの基礎

    2019/04/18に株式会社gumi様で行ったデザイン講義のスライドです。 デザインとは何か?デザイナーは何を考えてデザインを作っているのか? という話から、実際にデザインを評価・検討するための言葉を紹介しています。 この 作品 は クリエイティブ・コモンズ 表示 - 改変禁止 4.0 国際 ライセンスの下に提供されています。 第二回「UIデザインをはじめよう」はこちら https://speakerdeck.com/kinakobooster/uidezainwohazimeyou 第三回「今日からできるUXデザイン」はこちら https://speakerdeck.com/kinakobooster/jin-ri-karadekiruuxdezain ※訪問講座のご案内※ あなたの会社に話しに行きます。料金表はこちら https://xemono.life/#/workwith/co

    これだけ守れば見やすくなるデザインの基礎
  • スマホ版「風来のシレン」が「壺投げゲー」と化している悲しみについて(※追記あり)

    先日発売されたスマホ版「風来のシレン」、みなさんプレイしていますか? 子どもの頃にSFC版第1作に出会って以来、筆者も20数年来のシレンファンとして各シリーズを今でも遊んでいます(それほど上手ではないですが)。 そんなわけでスマホ版シレンもさっそく購入してみたのですが(買い切り型で税込1800円)、発売前からやや不安視されていたUI周りが、やはりというか何というか、なかなかに厳しい感じに仕上がっています。 今回はスマホ版シレンを数日プレイしてみて気がついた、「ちょっとここは(アップデートなどで)どうにかならないもんかなあ」と感じている点について書いてみます。 追記 2019年4月22日、待望の【v1.1.0】アップデートが配信されました。 記事で書いた「マップ移動」「アイテム使用」のUIが大きく改善されたほか、救助パスのコピー&貼り付け機能なども実装されています。「壺の中身を常時表示」「

    スマホ版「風来のシレン」が「壺投げゲー」と化している悲しみについて(※追記あり)
    yogasa
    yogasa 2019/03/28
    もしもしでまともなゲームコンソール向けゲームを期待する方が間違ってる。ユーザーもガチャ嗜好しかいないんだからずっとガチャ引かせておけばいい
  • 「Amazonのプライムビデオが難しい」というおかんの言い分を聴いてみた|Tsutomu Sogitani

    大阪の実家に帰った時、リビングのテレビの裏側を見たらAmazonのFire Stick TVが挿してありました。このFire Stick TVをテレビに繋ぐと、Amazonのプライムビデオを観ることができるようになります。 プライムビデオには、Amazonプライムの会員であれば、追加費用を払うことなく楽しめる映画やドラマ、アニメなどが豊富に揃っています。さらに個別に追加金額を払うとほとんどの映像コンテンツを観ることができるという、まさにTSUTAYAキラーなサービスです。 うちのおかんは月に2~3回は映画館に行くほどの映画好きなので、プライムビデオのメインターゲットといえるでしょう。来ならプライムビデオで映画三昧の毎日を送っていてもいいはずです。 しかしながら、Fire Stick TVを挿しているにもかかわらず、プライムビデオを一度も使っていませんでした。初期設定をした私の弟が一通り使

    「Amazonのプライムビデオが難しい」というおかんの言い分を聴いてみた|Tsutomu Sogitani
    yogasa
    yogasa 2019/03/19
    便乗して言うけどプライムのUIはクソ。あとiPhone系の自称シンプルで導線がないやつも