タグ

uxに関するyocchi24のブックマーク (60)

  • UI / UX 学びまとめ

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

    UI / UX 学びまとめ
  • 優れたフォームをデザインする

    サインアップのフローであれ、マルチビュー・ステッパーであれ、ありきたりのデータ入力であれ、「フォーム」はデジタル・プロダクト・デザインにおいて最も気を遣わなければならないものの1つです。 そこで、今回は一般的にフォーム・デザインで何をやり、何をやらざるべきかについてお話したいと思います。あくまで一般的なガイドラインですので、そのようなものとしてご理解頂いた上で、皆さんの参考になれば幸いです。

    優れたフォームをデザインする
  • フェンスを外す人 - β2

    イギリスのチェスタートンという批評家の名言に好きな言葉がある。 「なぜフェンスが建てられたのかわかるまで、決してフェンスをとりはずしてはならない 」 高級なクラブなどに行くと気づくのは、そこにある灰皿が極端に小さいことだ。小さく造形された灰皿はそれだけで独特な美しさを持っているが、ここには原作者の粋なアイデアが詰まっている。小さな灰皿は、一でもたばこを吸えばいっぱいになってしまう。そうすると、スタッフが灰皿を新しいものに替える。そうするとことで、客への細やかなサービスを演出できるし、スタッフに自然と客へ細かく注目させることを可能にしている。 もちろん、これを違うやり方で実現することもできる。たとえばマネージャーが、スタッフに「客を細かく見ろ。灰皿は、客が一たばこを吸ったら必ず変えろ」と言えばいい。そういうマニュアルを作ってもいいし、バックルームに貼り紙をしてもいい。なんらかの指示や号令

    フェンスを外す人 - β2
    yocchi24
    yocchi24 2016/05/18
    これはUX。体験に自然にそうなるように組み込む。ちょっとしたアイデアなんだけど難しい。
  • 藤田晋『ユーザー目線の勘違い』

    ネットサービスのプロデューサーや 開発陣と仕事をしていると、 最初はユーザー目線で創っていた 筈なのに、いつの間にか そうではなくなっていくパターンは 大きく分けると二つあります。 (1)収益を稼ぐことを優先する。 (2)運営側が使わせたいサービスを 全面に押し出す。 そして、実感値として圧倒的に(2)の ケースのほうが多いです。 昨日も新規サービスをチェックしていて、 「それは我々が使わせたい機能の ゴリ押しでしょ」 「ユーザーが使いたいものではなくて、 自分が使わせたいんでしょ」 などと指摘したのですが、この話、 今まで当に数えきれないくらい同じ 話を多くのプロデューサーにしてきました。 「ユーザーに対するデリカシーが お前は足りないんだよ!」 とか、 「おもてなしの心がないのか!」 などと口汚く罵ったこともあるのですが、 大抵の場合、それを指摘された側は、 怒ってる私をみてキョトン

    藤田晋『ユーザー目線の勘違い』
  • 負け組なモバイルWebは、これから本当に復活するのか?Googleが考える次のアーキテクチャ - ふろしき Blog

    Google I/O 2015でのセッション「The Next Generation Mobile Web(次世代のモバイルWeb)」がそこそこに激アツな気がしたのですが、予想に反し、あまり注目を集めていません。 わかります。大衆向けなメディアだと、AndroidVR/AR、Google Photosのようなわかりやすいキーワードの方が注目されるでしょう。エンジニア向けメディアであっても、昨今のモバイル技術の状況を鑑みて、ネイティブアプリの方を扱いたいと感じるのが当然です。 先日、某懇親会で「え、モバイルをWebでやっているのですか?それ、完全に負け組じゃないですか」と言われ、そこまで印象が悪いものかと心を痛めました。負け組とか、Webがかわいそうじゃないか。 そんな状況というのもありまして、先日の「第58回HTML5とか勉強会」では、あえてGoogleらが考える「次世代モバイルWeb」

    負け組なモバイルWebは、これから本当に復活するのか?Googleが考える次のアーキテクチャ - ふろしき Blog
  • あなたは今も犯している!?モバイルUXの7つの失敗 - ふろしき Blog

    ここ最近、モバイルWebコミュニティにて、Apptimize社のトップであるLynn Wang氏がポストした「7 Mobile UX Mistakes You’re Probably Making Right Now」が話題になっています。 www.sitepoint.com その内容とは、彼女自身が、A/Bテストを使い様々なモバイルアプリの改善を行い、その中で得られた知見をまとめたものです。若干、煽り気味なタイトルに見えますが、中身はしっかりしていて、多くの人がなんとなく感じていることをキレイに言語化しています。個人的にも、参考になると感じています。 人の許可が頂けたので、日語らしく読めるようざっくりと意訳し共有します。 1. 不必要にサインインをさせようとする 多くの人々は、ユーザのサインインが価値を持つものだと考えています。しかし、時にサインインは、ユーザに苦痛を与えます。たとえ

    あなたは今も犯している!?モバイルUXの7つの失敗 - ふろしき Blog
    yocchi24
    yocchi24 2016/02/22
    『検索結果一覧画面において、一部に特別割引を表示させる』⇒『検索結果の一覧に不公平さを作ったことで、不信感を与え』なるほど…
  • HTML の a 要素に target=”_blank” をつけるのはもうやめよう

    HTML の a 要素に target 属性をつけて、リンク先の文書をどこで開くのかを指定できますね。 デフォルトは _self で、元のドキュメントと同じフレーム。無指定だとこれになるので、わざわざこれを書くことは少ないと思うけど。 一番よく使うのは target="_blank" じゃないでしょうか。リンク先のドキュメントを新しいタブやウィンドウで開くやつですね。 これ、以前はよくつかってました。ルールとして サイト内リンクは target 指定なし 外部サイトへのリンクは target="_blank" というのが多かったんじゃないかな。 でも最近、これはもうリンク先がどこであろうと指定しない方がいいんじゃないか、と思ってます。 もちろんサイトによってそれぞれ使いわけはあると思うんだけど、少なくともほとんどの手元のサイトの場合はいらない。 target="_blank" を使ってきた

    HTML の a 要素に target=”_blank” をつけるのはもうやめよう
    yocchi24
    yocchi24 2015/06/16
    確かに…。でもレスポンシブだとめんどいな…
  • Private Presentation

    Private content!This content has been marked as private by the uploader.

    Private Presentation
    yocchi24
    yocchi24 2015/06/04
    ほんとよくあるw
  • フォームはラベルの配置場所で使いやすさが全然変わる!ユーザーが利用しやすいフォームを徹底考察 | コリス

    あなたのフォームは、ユーザーが簡単に利用できますか? もし簡単でないなら、フォーム入力を完了するのも予想以上に難しいとも言えます。 ユーザーが入力しやすく、そして入力内容の確認も簡単なフォームについての考察を紹介します。 Why Infield Top Aligned Form Labels are Quickest to Scan by anthony 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 フォームは入力前、入力後の分かりやすさが大切 最近のフォームで見かける問題 1つ目:ラベルとフィールドを上から順番に配置した場合 2つ目:ラベルをフィールドの内側に配置した場合 3つ目:ラベルをフィールドの内側のトップに配置した場合 ラベルの配置を内側トップに変えるとどうなるか ラベルを内側トップに配置するのが機能するフォームとは まと

    フォームはラベルの配置場所で使いやすさが全然変わる!ユーザーが利用しやすいフォームを徹底考察 | コリス
    yocchi24
    yocchi24 2015/05/14
    うーん…テキストBOXとラベルの間の区切り線をなくし、フォーム全体をグリッドにしたほうが視認性があがる??入力欄がどこなのかわかりづらい気がするし、紙じゃないのに視点が左右に移動させるのはどうなんだろう?
  • 年寄りを困らせる「レスポンシブWebデザイン」 | スタッフルーム | 日経BPコンサルティング

    スマートフォン利用者に配慮して「レスポンシブWebデザイン」を採用するサイトが増えています。このデザインは1つのHTMLファイルで、パソコンとスマートフォン、それぞれに適したページを表示できるのが特長。特に若い人をターゲットにする大学サイトで注目を集めています。Googleも推奨する優れた手法ですが、デメリットもあります。話題になることが少ない、ユーザビリティ上の問題点について指摘しましょう。 「レスポンシブWebデザイン」(以下、レスポンシブ)とは、ブラウザーの画面サイズに応じてレイアウトを変更させるWebページの作り方。パソコンとスマホから同じURLにアクセスし、同じHTMLファイルを開くと、パソコンにはパソコンに適したデザイン、スマホにはスマホに適したデザインが表示されます(中には、タブレット向けデザインを用意しているサイトもあります)。 レスポンシブを採用するサイトは最近増えていま

    年寄りを困らせる「レスポンシブWebデザイン」 | スタッフルーム | 日経BPコンサルティング
  • 高コンバージョンを保つウェブサイトが採用する5つの行動心理学テクと実例|グロースハックジャパン|Growth Hack Japan

    7/25最新記事 見落とされがちなオフライン上での3つのリファラルチャンス edited by Ryutaro Mori 過去に何度もお伝えしてきた行動心理学を利用したコンバージョン最適化テクニック。 日は、growth hack japanの中でまだお伝えしてなかった行動心理学テクを、実例とともに5つ紹介します。 参考:5 Psychological Principles of High Converting Websites プレグナンツの法則 プレグナンツの法則によると、人間は明確で順序だった物事を好み、複雑なアイディアやデザインを恐れる傾向にあります。 シンプルなものほど予期せぬ不快なサプライズを引き起こしにくいということを能的に感じ取り、それに従ってシンプルに物事を解釈する人間の傾向を表しています。 例えば以下の英文を見てみましょう。 ① Welcome to growth

    高コンバージョンを保つウェブサイトが採用する5つの行動心理学テクと実例|グロースハックジャパン|Growth Hack Japan
  • レスポンシブからアダプティブへ – 必要な情報を、必要なときに、必要としている人へ | Digital experience University

    2013年4月5日〜7日まで米国Baltimoreで開催された、IA Summit 2013に参加してきました。Avi Itzkovitch氏による「Designing with Sensors: Creating Adaptive Experiences」から、センサーを搭載したデバイスを用いてパーソナライズされた情報を届ける「アダプティブデザイン」というコンセプトを紹介します。 2013年 05月 10日 レスポンシブからアダプティブへ – 必要な情報を、必要なときに、必要としている人へ Reiko Wakamoto 2013年4月5日〜7日まで米国Baltimoreで開催された、IA Summit 2013に参加してきました。Avi Itzkovitch氏による「Designing with Sensors: Creating Adaptive Experiences」から、センサ

    yocchi24
    yocchi24 2014/06/17
    UXの一つ。そもそもスマホで見たい情報とPCで見たい情報は違うんじゃないかな。
  • これまで見た中で最も洗練された“お肉屋さん”のパッケージデザイン | PR EDGE

    Case: CORELLA Package 総合スーパーがこれだけ広まっている今なお、「お肉はやっぱり専門店(お肉屋さん)で買うのが一番」と言われることはさして珍しいことではありません。 町のお肉屋さんの強みといえば、地元の人達との人間関係や“お肉の品質・鮮度(プロダクト自体)”であり、その点にこだわりぬくお店が多い中にあって、一方で他の小売業ではマーケティングにおいて重視されている“商品パッケージ”を、差別化のポイントにしているお肉屋さんは希少ではないでしょうか。 そんなお肉屋さんの常識を覆すような取り組みを、スペインでお肉とチーズの小さな専門店を営む「CORELLA」が実施しました。マーケティングの一環として、商品パッケージとロゴを地元の広告会社に依頼してリデザインしたのです。 新しいパッケージデザインがこちら。 白と黒を基調としたシンプルなデザインで、“どの部位”のお肉なのかが直感的

    これまで見た中で最も洗練された“お肉屋さん”のパッケージデザイン | PR EDGE
    yocchi24
    yocchi24 2014/03/23
    これはわかりやすい!
  • やってられるか!!蹴りたいフォームの12要素 | WP-E (仮)

    UXとか難しいことはよくわかんないですが こんにちわ!@ampersand_xyzです。UXとかUIデザインとか、かしこさが低いので小難しいことはわからないですが、個人的にかつ主観バリバリで「イヤだな」って思うことはわかる! 飛行機やホテルの予約などで、ちょいちょいお問い合わせフォームや予約フォームを使うのだけど、その時に思わずイラッとしちゃうようなフォームの要素を思い出してまとめてみました。 (1)要件的に適切でなさそうな必須項目が多い 名前や返信先などの情報が必須になるのはそれはもちろん構わないけれども、 所属部署名、とか、業種、とかそういうのが必須の場合。 もちろん、問い合わせる先やその内容によって、 例えば、保険等に関する問い合わせだと業種によって契約の内容が違ってきたりするので必須になるのは頷けるけれども、これがべ物の通販の問い合わせフォームとかで必須だったら「?」って感じる。

    やってられるか!!蹴りたいフォームの12要素 | WP-E (仮)
  • webデザインの賞味期限(もしくは技術的負債の話)

    技術的負債」という話が、はてな村大字テクノロジー周辺を賑わせている。 技術的負債という(非エンジニアにとっての)隠しパラメータが生産性100倍を起こす- mizchi’s blog 出来る人からみたら超絶無駄なレビューとテストの存在意義 – novtan別館 プログラマの生産性と報酬 – アスペ日記 あたりがにぎわっているエリアだろうか。 私はエンジニアではないから全ての話の理解はできないんだけど。『見えづらい技術的負債が発生し積み重なった結果、誰かが尻ぬぐいをしている』という状況はwebデザイン、特にUIデザインの現場でも同じだなーと思ってる。 糞コードならぬ糞UIデザイン。webディレクター、webデザイナー、コーダー、フロントエンジニア皆が想定しえない余計な工数をとられてしまうUIデザイン。そしてえてして「なんでそんなに工数かかるの?」と言われ、挙句ちゃんと状況説明を上司に怠ると「

    webデザインの賞味期限(もしくは技術的負債の話)
  • 優れたユーザーインタフェース(UI)を実現するチェックリスト36項目

    【img via tabletop assistant by MattHurst】 優れたユーザーインタフェースとは何か。どのようなデザインを「優れたユーザーインタフェース」と呼ぶのに相応しいのだろうか。 GoodUIというサイトに優れたユーザーインタフェースを実現するために確認しておきたい36項目をイラスト付きで解説していた。とても分かりやすく納得できる内容が多かったので、紹介しておく! 1.マルチカラムではなく、シングルカラム 複数カラムだとユーザーの目線が左右に逸れてしまう可能性があるため。 2.まずはギフトを渡してみる 最初から買うことを促すよりもまずはこちらから何かを与えることによってユーザーに喜ばれる。 3.似た機能や項目は1つにまとめて表示する 似た機能を分散させる必要はない。 4.ユーザーからの反応を載せる 実際に使っている「ユーザーの声」を参考に買い物をする人は少なくない

    優れたユーザーインタフェース(UI)を実現するチェックリスト36項目
  • planBCD - Growth Platform

    planBCD is a crowd powered, automatic web page A/B testing service.Watch our 1 minute demo planBCD is the ideal service for all customers who want to improve the performance of their website w/o high price tags. Without using their brain or resources, clients can manage their A/B tests effectively. Only what they need to tell us are 1) pages to improve 2) performance objectives. Then, we can manag

    yocchi24
    yocchi24 2013/11/11
    UI改善用のABテストサービス。自動じゃなくてクラウドソーシングで改善提案される。#tctokyo2013
  • UIディレクションのカバレッジ

    タイトルでは「UIディレクションのカバレッジ」という表現をしましたが、今回はクオリティの高いUIを作るためにはどういう観点での品質管理が必要なのか、ということを自分なりにまとめてみたいと思います。 情報設計・レイアウト情報設計やレイアウトには無限に選択肢があるだけに、「どんなユーザーに、どんな接触態度で、どんな体験をしてもらいたいか」というマーケティング的な視点を持っているか否かで、アウトプットに大きな違いが出てきます。 ちなみに、初めにUIを設計する際には比較的このような視点を持ちやすいのですが、既にリリースしているサービスに対峙すると、どうしても既存のUIの延長線上で改善を考えてしまいがちです。そうならないよう、UIに関わる人たちは、常に提供したいユーザー体験の理想型を意識し、そこから逆算的にUIを考える癖をつけなければいけないと思っています。「なぜこれはこうしたのか?」と訊かれたら、

  • ナビゲーション/メニューのiPhoneアプリデザイン集22選

    FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ

    ナビゲーション/メニューのiPhoneアプリデザイン集22選
  • UXデザイナーがプロジェクトを進めるための8つの心構え | GREE Creators Blog

    みなさま、はじめまして。 UXチーム マネージャーのtakuyaです。 UXデザイナーの役割は様々です。 ただUXアプローチメソッドをプロジェクトに組み込んだだけでは、他のメンバーからアカデミックな印象をもたれてしまいがち。また、様々なメソッドアプローチがあるため、どこから手を付けていいかわからず、いつ、どのようなアクションを行うべきか迷うことも多いと思います。 そこでUXに関しての第一回目は UXデザイナーがプロジェクトをうまく進めるための心構えとコツを8つにまとめてみました。 1. 『お客さま』を常に意識しよう 日々の売り上げやKPIを追っていると見失ってしまいがちになる「お客さま」。 モノづくりの際には、必ず「お客さま」を意識する必要があります。 また、お客さまがそのサービスを利用するにあたっては、必ず「使う理由」があるはずです。 プロジェクトメンバーにそのことを理解してもらうために