タグ

UIとuiに関するohbaryeのブックマーク (37)

  • クレジットカードフォームの解剖学 | POSTD

    オンラインでクレジットカードを使って支払うことは簡単ですよね?この答えはYesでもNoでもあります。Yesの理由は、インターネットが普及された初期からずっとそうしていたから(例:Amazon)。Noの理由は、まったく同じクレジットカードフォームは2つとないからです。 過去20年以上で、私たちはオンライン支払のメンタルモデルを作り上げてきました。「財布からクレジットカードを取り出して、ウェブのフォームに必要なカード情報を入力、そして申込みボタンを押す」というものです。しかし、ユーザーが答えないといけない質問でいっぱいなので、全てを入力するのはとてもややこしい行為になってしまいます。そして言うまでもなく、誰も取扱い説明書なんて読みたくありません。 さまざまな有名ウェブサイト・アプリのクレジットカードフォーム 何かの代金をオンラインで支払う時は、人へ支払う時より2,3倍遅れをとります。端末のボタ

    クレジットカードフォームの解剖学 | POSTD
  • 大規模デザインシステムを作る:いかにしてアメリカ連邦政府のデザインシステムを作り上げたか - カタパルトスープレックス

    原文:"Building a large-scale design system: How we created a design system for the U.S. government" by Maya Benari, October 3, 2017 現在、ほぼ30,000の米国連邦政府のウェブサイトがありますが、それらウェブサイトの間に一貫性はほとんどありません。テクノロジーの分野で働く数十万人の政府機関の職員がいますが、彼らの携わるウェブサイトの構築や管理方法に共通点はありません。 その結果、政府はユーザーが十分に満足できないサービスに多くのリソースを費やしています。連邦政府のウェブサイトは行政が提供するサービスの正面玄関です。アメリカ政府と何らかの接触をはかるときユーザーが最初に出会う場所です。米連邦政府一般調達局のFederal Front Doorイニシアチブの調査からウ

    大規模デザインシステムを作る:いかにしてアメリカ連邦政府のデザインシステムを作り上げたか - カタパルトスープレックス
  • 読みやすさのデザイン備忘録 | 深津 貴之 (fladdict) | note

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

    読みやすさのデザイン備忘録 | 深津 貴之 (fladdict) | note
    ohbarye
    ohbarye 2017/10/03
    “ダウンロード待ちによる離脱率の上昇が、Webフォントのメリットを打ち消してしまいます”
  • みんなでデザイン、あなたもデザイン

    Wordcamp Tokyo 2017で発表したプレゼンテーションです。 動画: https://wordpress.tv/2017/09/28/yutaka-sekiguchi-%E3%81%BF%E3%82%93%E3%81%AA%E3%81%A7%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%80%81%E3%81%82%E3%81%AA%E3%81%9F%E3%82%82%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3/ -- WordCamp Tokyo 2017 https://2017.tokyo.wordcamp.org/ hanarenoheya http://www.hanarenoheya.com/

    みんなでデザイン、あなたもデザイン
  • 最近のWebサイトで使われてる、UI要素をデザインするテクニックのまとめ -Little UI Details by Steve Schoger

    ぱっと見ただけではなかなか気がつかないような、ディテールにこだわった素晴らしいデザインのアイデアとテクニックを使ったUI要素を紹介します。 最近のWebサイトで見かけるUI要素がたくさんあり、すぐに次のプロジェクトに役立つと思います。

    最近のWebサイトで使われてる、UI要素をデザインするテクニックのまとめ -Little UI Details by Steve Schoger
    ohbarye
    ohbarye 2017/09/14
    あ〜わかる、あるあると思いつついざというとき自分の引き出しからは出てこない
  • 『NieR:Automata』のUIデザイン | NieR:Automata 開発ブログ

    こんにちは。『NieR:Automata』で UI (ユーザーインターフェイス) とメカデザインを担当した木嶋です。開発ブログを書くのは『ベヨネッタ2』以来になります。(以前書いた記事) 普段あまり注目されないUIですが、ありがたいことにユーザーの方々からの要望があり、当記事を執筆することになりました。UIにもヨコオさんのこだわりがたくさん詰まっているので、その一部も併せて紹介していこうと思います。 ■はじめに:UIアーティストの仕事 UIアーティストは、体力ゲージや会話ウインドウ、各種メニュー画面などゲーム内表示物を作っています。 大まかな仕事の流れはこんな感じです。 1:UIのコンセプトデザイン策定 2:仕様に合わせて各メニュー画面や表示物のデザインを量産 3:UIゲームデータを作成してプログラマーに実装してもらう 4:動くUIを触ってみてアニメーションなどの調整、クオリティアップ

    『NieR:Automata』のUIデザイン | NieR:Automata 開発ブログ
    ohbarye
    ohbarye 2017/08/26
    NieR のデザイン超かっこよかったのでその裏話めちゃくちゃおもしろい
  • ユーザーインターフェイスにおける明示的アクション/暗黙的アクションの違いと設計の考え方 – usagimaru – Medium

    明示的アクション/暗黙的アクションについてずっと言語化できていなかったので、このたび記事にまとめてみました。馴染みのあるMac OSそしてiOSを例に、画面上のオブジェクトを操作するための二つのパラダイムについて説明します。 2005年頃の Apple Human Interface Guidelines (HIG) を開いてみると、そこには「Explicit and Implied Actions – 明示的および暗黙的アクション」と呼ばれるデザイン原則が示されています。Mac OSのユーザーインターフェイスでは、明示的アクションと暗黙的アクション、この二種類の操作体系が同時に提示され、ユーザーは好きな方法を選択することができるようになっています。 明示的アクション明示的アクションとは、すなわち画面上に明示された手段を選択してコマンドを実行するというものです。Macを例にすると、ユーザー

    ユーザーインターフェイスにおける明示的アクション/暗黙的アクションの違いと設計の考え方 – usagimaru – Medium
  • 【翻訳】ビジュアルデザインはつまらなくなってしまったのか? - MOL

    Original:HAS VISUAL DESIGN FALLEN FLAT? (2015-01-20)by Emmet Connolly 2013年から2014年の劇的なUIフラット化により無数のピクセルが流れ落ちていった それはビジュアルデザインにおいて非常に大きな変化だった。Microsoftの急進的でモダンなMetro UIはその前兆だった。iOS7のリリースよって大衆化し、UIのトレンドは2極化した。Google Material Designによって、おおかた完成した。 フラットデザイン(未完成であるけれど便利な表現)はスキューモーフィズム(同前)を駆逐するだけでなく、それの墓の上で踊り、すべてのべべル、影、墓石のテクスチャさえ消し去ってしまった。 上図のようなデザインである。 発展、変化、流行は避けられないものだ。このような最新スタイルもまた、いつの日か廃れていくだろう。未来

    【翻訳】ビジュアルデザインはつまらなくなってしまったのか? - MOL
  • 「デザイン落とし穴」という話をしてきました - transitkix design log

    transit_kixです。 UX MILKの三瓶さんにお声がけしてもらい、先日ux failconというUIデザインやUXデザインに携わっている人々の集まるイベントに登壇してきました。 登壇資料 内容は、サービスデザインにおいて仮説→検証→実行のそれぞれのフェーズで陥りやすいケースについてお話ししました。 ユーザーストーリーを吹き出し形式に これは簡単で比較的効果があるので、初心者で勉強したい人はどうぞお試しあれ。 当日の様子 DMMさんの新オフィス、壁に物の植物が生えています。 他の登壇者の方の失敗談も面白かったです。 「賃貸住宅「コンセントハウス」のデザイン」(シャープ/電化美術の中田 裕士さん)

    「デザイン落とし穴」という話をしてきました - transitkix design log
  • UIデザイナーに必要なのは、決定力のあるデザインを作る能力 | tsublog

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

    UIデザイナーに必要なのは、決定力のあるデザインを作る能力 | tsublog
    ohbarye
    ohbarye 2017/06/18
    “結局誰がが仕様漏れを吸収してるのであれば、それはデザインではなく、グラフィック制作の領域から抜け出せていないのかもしれない”
  • つよいUI - transitkix design log

    …というものを最近考えていました。「画面デザインのOKももらったし、私の仕事は終わり!あとはエンジニアに指示書を渡すだけ」と一息ついた時にこそ、改めてデザインを見つめなおすべきです。 つよいUIであるための7つの視点 1.来、そこにあるはずの情報がない場合はどうなりますか? リストUIで載せる情報が0件、文章が空っぽ、画像がない時など 2.表示する要素が想定よりすごく多い/すごく少ない場合はどうなりますか? 数字の桁数、文章の行数、文章が入りきれない場合は文中・文末のどこを省略すべきか…など 3.ユーザーさんの立場によって、表示要素に変化はありませんか? ゲストとログインユーザー、無料会員と有料会員…など 4.ロード中、もしくはロードされるまで何が出ていますか? 通信中の表示、読み込み中の画像エリア…など 5.予期せぬエラーが起こった時、画面はどうなりますか? 通信エラー、リンク先のコン

    つよいUI - transitkix design log
    ohbarye
    ohbarye 2017/06/18
    プロダクトの定点だけでなく"体験"をデザインしてると思うときに"強さ"を感じる
  • より良い検索フォームのための9つのベストプラクティス

    検索ボックスは入力フィールドと送信ボタンの組み合わせです。検索ボックスにデザインは必要ないと考える人もいるかもしれません。たしかに、たった2つの単純な要素でしかありません。しかし、コンテンツが多いサイトでは、検索ボックスは往々にしてもっとも頻繁に使用される要素なのです。 複雑なサイトに遭遇したとき、ユーザーは労力を使わずに素早く最終目的地まで辿り着けるように、すぐに検索ボックスを探します。ですから、検索ボックスのデザインやユーザビリティは重要なのです。 この記事では、ユーザーが目的地に辿り着くための時間を節約するために、検索ボックスをどのように改善できるかを見ていきます。

    より良い検索フォームのための9つのベストプラクティス
  • マテリアルデザインでやってはいけない68のこと(間違いチェックリスト)

    マテリアルデザインでは、Googleにより作り方のガイドラインがしっかりと決められています。しかし、ルールがかなり多いため、どうしても間違った表現をしてしまいがちです。今回はマテリアルデザインでやってしまいがちな間違いを淡々と紹介していきます。WEB制作、アプリ制作時のチェックリストとしてご活用ください。 Google I/O 2018でのガイドラインのアップデートを反映しました。 重要なルール 1 マテリアルから文字をはみ出してはいけない

    マテリアルデザインでやってはいけない68のこと(間違いチェックリスト)
  • 日本で働く外国出身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
  • ユーザーのコンピュータスキルの分布: ユーザーのスキルはあなたが思う以上に低い

    先進33か国において、コンピュータ関連の高い能力を持つ人は人口の5%にすぎない。また、中程度の複雑度のタスクを完了することができる人は全体の3分の1しかいない。 The Distribution of Users’ Computer Skills: Worse Than You Think by Jakob Nielsen on November 13, 2016 日語版2017年3月16日公開 身につけるのがもっとも困難なユーザビリティの教訓に、(訳注:デザインプロジェクトに携わっている)「あなた方はユーザーとは違う」というのがある。これこそがユーザーのニーズについての推測が大失敗に終わる理由だ。デザイナーは大半のターゲットオーディンエンスとあまりに異なっているため、いいと思っているものや利用しやすいと思っているものが見当違いになるだけでなく、そうした自分たちの個人的好みによって判断す

    ユーザーのコンピュータスキルの分布: ユーザーのスキルはあなたが思う以上に低い
  • http://www.ogura.blog/entry/2017/02/28/190245

    http://www.ogura.blog/entry/2017/02/28/190245
  • なぜEtsyでは無限スクロールは失敗したのか

    「ユーザーがページに滞在してコンテンツに関わる時間が長くなる」といわれる無限スクロールを採用したものの、うまくいかなかったというEtsyでの事例から、その教訓を読み解きます。 U-Site編集部 2013年1月25日 HCD新人部員のTです。 1年以上前の記事ですが、「Pinterestによってもたらされた、6つの重要なWebデザインとユーザビリティにおけるトレンド」という下記の記事を読んでいました。 該当記事:6 Important Web Design and Usability Trends Sparked By Pinterest – The Daily Egg ここで挙げられている項目の3つ目のトレンド、”Deliver Content in Flow”を見てみますと、「無限スクロールによって、ユーザーがページに滞在してコンテンツに関わる時間が長くなる」と書かれています。 Bec

    なぜEtsyでは無限スクロールは失敗したのか
    ohbarye
    ohbarye 2016/08/25