Taras Bakusevych – Medium
The right UI can elevate an application from functional to unforgettable, making the difference between a user who engages once and one who returns time and again. — Crafted to be your ultimate roadmap in the journey of UI design. Whether you are a seasoned designer looking to refresh your approach or a novice eager to learn the ropes, these rules are tailored to help you create interfaces that ar
マリオのUIがフラットデザインになった日を知っているか 〜 【視伝研】UIデザインの歴史を紐解く｜Yamashita Angelica
※ おことわり ※ この記事内で取り扱っているゲーム作品について、私は開発上の関わりは一切ありません。あくまでいち個人・いちファンとしての考察であることをご承知おきください。 今回の視伝研テーマは【UIデザインの歴史を紐解く】です。 年表形式でUIデザインの歴史を作りながらメンバーと意見を交換しました。PCやスマートフォンのOSのUIはもちろん、乗り物の操縦桿やSNSのデザインなど、さまざまな観点で資料を集めてみました。 そこで、元ゲーム屋の性として、個人的に楽しくなってしまうのはやっぱりゲームUIの歴史なのですが… なんか、ゲームのUIってこんなイメージありませんか。 ゲームUIデザイナーを目指す初心者が作りがちなやつ （一応弁明するとこれは1〜2分くらいで作った雑UIです）もちろんこういうのを作れることは大事なんだけど、「ゲームでよくあるやつ」以外のデザインの引き出しがないままだといず
UXライターが解説する超実践的UXライティング入門｜nao | UXライター / コピーライター | 著書『#秒で伝わる文章術』発売中
はじめに 私は事業会社（楽天→スタートアップ）でUXライティングを専門としてプロダクトの開発に携わっています。しかし、事業会社で私のような専任のUXライターやコピーライターを雇用している企業は決して多くありません。 多くの場合、UXデザイナーやUIデザイナー、エンジニア、プロダクトマネージャー、マーケターなど、UXライティングに比較的近い立場の方が、自分自身でUIテキストを書かなければならない、というのが実情だと思います。 そうした状況で試行錯誤されている方に向けて、自分に何かできることがあるのではないかと思い、このnoteを書くことに決めましたら。私がUXライティングの知見をしっかりと整理して伝えれば、役に立つのかもしれないと。 このnoteでは、私なりの実践的なUXライティングの方法論を言語化します。あくまで私が実践しているものなので、考え方もやり方も違うし、こんなのUXライティングじ
UIデザインのための心理学：33の法則・原則（実例つき） | ベイジのUIラボ
ユーザーが「使いやすい」と感じるアプリケーションは、良いUIデザインで設計されているともいえます。良いUIデザインでは、ユーザーの認知負荷を下げる工夫がされています。認知負荷を下げる仕組みを知るには、心理学とUIデザインの密接な関係を理解することが重要です。 行動心理学や認知心理学の発展により、人間の感情や行動は、脳の仕組みに基づいて様々な法則に当てはめられることが分かってきました。UIデザインでも、心理学を活用したアプローチでより良いユーザー体験を生み出すことができます。特に業務システムのような複雑なアプリケーションでは、メニューや画面レイアウトなど幅広く活用できます。 今まで心理学はマーケティング領域で応用されることが多く、ウェブサイトやアプリケーションのUIデザインで語られることはそれほど多くありませんでした。そこで本記事では、人の様々な心理現象や認知の法則を、UIデザインに活用する
UIが嘘をつく？ ユーザ体験における「楽観的な更新」とSPAでの作り方
こんにちは、株式会社カミナシでデザインエンジニアをしているショウです。 突然ですが、UI/UX デザインにおいて、「楽観的な更新」という言葉を聞いたことがありますか？あまり聞いたことがなくても、実は日常にたくさん存在しています。 例えば、 twitter や facebook のいいねボタン。いいねをタップした直後に色がつくのですが、実はサーバーへのリクエスト送信と UI 上のいいねの色付きが同時に発生しています。つまりサーバーからの通信結果を待たずに UI を更新しています。 他に、trello でタスクカードを隣の列に移動したり、iMessage や Facebook メッセンジャーでのメッセージの送信、Kindle アプリで途中までしかダウンロード出来てない本が読めることなども楽観的な更新です。 図：楽観的な更新を採用しない時と採用した時のメッセージ送信のUI （引用元） 楽観的な更
ユーザインタフェース設計
Myersらの1992年の調査によれば、一般的なグラフィカルユーザインタフェース（Graphical User Interface; GUI）アプリケーション開発でコードの48%、実装時間の約半分がユーザインタフェース部分に割かれているといいます。それだけユーザインタフェースの設計は難しいプロセスなのです。 ユーザインタフェース設計で役に立つ基礎理論や評価手法、支援ツールは、人とコンピュータの関係をよりよくしていく学問 Human-Computer Interaction (HCI) で研究、開発されてきました。ただ、こうした知見を体系化されたかたちで学習する機会は（とくに国内では）必ずしも多くありません。 このWebページでは、自分が研究者になるにあたって知っておきたかった基礎的なことを、参考文献を挙げながら紹介します。想定している読者層は HCI を専門にする学生や、ユーザインタフェー
管理画面のUIデザインにおける20の改善ポイント | ベイジのUIラボ～業務システムとSaaSのUIを考える
私たちの日常業務で使われる管理画面は、大量の情報と複雑な機能で構成され、利用難易度が高い傾向にあります。検索性の乏しい管理画面の一覧から1つの情報を見つけるために、どれだけの時間を費やしているでしょうか。 1億円の工数をかけて開発した機能も、低品質なデザインでは、機能の存在に気付かれなかったり、間違って使われたりと、期待した業務コストの削減に繋がりません。これでは、1億円を捨てたようなものです。 使い勝手の良くないデザインは、ユーザーだけではなく、開発者にも悪い影響を及ぼします。複雑な構造と分かりにくい操作体系の管理画面は、開発やテストの手間を増やし、その後の機能拡張も難しく、改修コストも増大します。 これらのリスクを抑えるためには、UIデザインの基本原則を理解し、適切に管理画面を設計することが重要です。 私たちは管理画面のUIデザインの改善やリニューアルを手掛けることも多いのですが、その
UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ～業務システムとSaaSのUIを考える
デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上（2019年12月現在）ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
ソシオメディア | OOUI デザインの準備運動
OOUI（オブジェクト指向ユーザーインターフェース）デザインに慣れるための準備運動をいくつか考えてみました。 これらの準備運動は、UIの大まかな構造に関する話が主で、以下をなんとなく知っている状態の方が対象です。 名詞と動詞で捉える 名詞→動詞で構成する アプリケーションをタスクや機能の羅列と捉えるのではなく、オブジェクト（名詞、もの、関心の対象、概念と言い換えても良いです）を並べユーザーに提示し、そこにアクションが付随するという世界観ですので、人によってはアプリケーション像（コンピュータ像）の転換が必要です。 それぞれの準備運動はオブジェクトを探すことを重視したものになっています。好きなものから選んでやってみましょう。 1. ラフスケッチ いくつかのユーザー要件をもとに、オブジェクトを意識しながら、UIのラフスケッチを描いてみましょう。制限時間は20分です。 これは学校の教員が使うための
ソシオメディア | ヒューマンインターフェース ガイドライン
ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション
ソシオメディア | OOUI – オブジェクトベースのUIモデリング
最近、OOUX という言葉を見聞きしました。これはオブジェクト指向の利用者体験（Object-Oriented User Experience）のことで、いくつかの記事を読んだところ、アプリケーション設計において画面とデータを対応づける際にオブジェクトを手掛かりにするという方法論のようです。つまり OOUX は「オブジェクトベースのUIモデリング」と言い換えることができそうです。そうすると実は以前からそのようなデザイン手法はあり、「OOUI（オブジェクト指向ユーザーインターフェース）」と呼ばれていたのです。最近になって OOUX という言葉が使われるのは、OOUI のことを知らなかったか、もしくは流行語である「UX」を用いた方がかっこいいと考えたからではないでしょうか。 「オブジェクトベースのUIモデリング」というデザイン手法は、GUI アプリケーションをデザインする際の基本的なテクニック
はっきりと分かるようにデザインされたUIは、最高のUI
多くのデザイナーが日々、使いやすいデザインについて模索しています。 WebページやスマホアプリのUIデザインにおいて、使いやすいデザインへの一つの答えとなる記事を紹介します。 すっきりデザインされたUIよりも、はっきりと分かるようにデザインされたUIの方が使いやすい最高のUI！ The Obvious UI is Often the Best UI by Susanna Zaraysky 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 下部のナビゲーションバー = 使用率の増加 下部のナビゲーションバーとアクセシビリティ 「明白な」アイコンが「一般的な」アイコンとは限らない 他のUIをコピーしても、明白なデザインは保証されません 明白なものを見つけるには、問題点を見つけること はじめに フランスの哲学者ヴォルテールの言
pagemap · mini map for web pages · larsjung.de
1.4.0Mini map for web pages. You can find an example on this web site in the top right corner. And there are two more demo pages: boxes and text. Example usageadd a canvas tag to your HTML page: <canvas id='map'></canvas> fix it's position on the screen: #map { position: fixed; top: 0; right: 0; width: 200px; height: 100%; z-index: 100; } init and style the mini map: pagemap(document.querySelector
UIパーツごとに閲覧可能なスマホアプリのデザインギャラリーまとめ
2018年5月11日 スマートフォン スマートフォンアプリ用のデザインでちょっと調べ物をしたくてギャラリーサイトを巡っていたのですが、以前見ていたサイトが軒並み404で表示されなかったり、更新がとまっていてしょんぼり気分…。そこで最新のアプリが掲載されていて、且つ見やすくパーツごとに閲覧できるサイトを集めてみました。 ↑私が10年以上利用している会計ソフト！ UI Movement アプリを触った時の動きを動画で掲載しているUI Movement。見た目だけではない使い心地も伝わってきます。メール登録すると週に一度更新のお知らせも届けてくれるようです。 Pttrns PttrnsではiOSアプリだけでなく、Android、Apple Watch用のアプリも紹介しています。有料登録するとより多くのアーカイブを閲覧できたり、検索ができるようになります。 MobileMozaic MobileM
2018年のフロントエンドエンジニア/デザイナーに知ってほしいAtomic Design - Qiita
目的 フロントエンドを開発する上でUIコンポーネントを区分する際に問題が起きました。 UIコンポーネントを区分せず、フラットに開発すると、1サービスで軽くUIコンポーネントが3桁ぐらい同一ディレクトリで無法地帯のように散乱されるのは想像に難くないでしょう。(事実そうなりかけて解決策を探した結果この記事を書いています それを解決するためにAtomic Designを参考にしようといくつかの方のAtomic Designのスライドショーを見ましたが、それらのスライドショーの内容の通りやっても上手く行かない事は明白でした。 調査した所、Atomic Designをフロントエンド界隈では使っている所はとても多かったです。 そんなに広まっている設計がこれほどまでに薄いものだとはどうしても思えなくて、原文を探し呼んだ所、とても重要な部分が他のスライドや記事では抜けている、または間違った解説をしていたの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Design systems
The Component Gallery
UI8 | Curated Marketplace for Designers
UX Collective
Solid Vs. Outline Icons: Which Are Faster to Recognize?
