マイクロインタラクションを活用してUXを改善する | UX MILK
Stephenはオンラインマーケティング担当者、デザイナー、テクノロジーに精通したブロガーです。彼はロサンゼルスに拠点を置くSPINX Digital Agencyと提携しています。 ユーザーは常にサイト内の機能とインタラクションをしています。そして、あなたが想像する以上にそのような小さなインタラクションは重要です。 小さなインタラクションは全体の体験に影響を与えます。これを利用してユーザー体験を向上させて、ユーザーが最後までインタラクションを続けてくれるようにしましょう。 マイクロインタラクションとは何か これらの小さなインタラクションには、マイクロインタラクションという適切な名前があります。マイクロインタラクションは、ユーザーがサイトとインタラクションをする際に行う基本的なタスクです。上手にデザインされているサイトは、ユーザーが操作するときにポジティブなフィードバックを与えます。ユーザ
サイトやアプリの使い心地を改善！UIアニメーションを良くする実践テクニック、小技7個まとめ
実際のサンプル例を確認しながら、UIデザインの「良い」アニメーションを「より良く」してみましょう。ほんの少し調整を行うだけで、UIマイクロインタラクションをより魅力的で、ユーザーにも分かりやすく表現できます。 たとえば、リスト形式で並べたコンテンツにちょっとした工夫を加えるだけで、よりつながりのあるUIパターンを演出できたり、コンテンツの関係性を考えたアニメーション遷移、ボタンをクリックするなどユーザーに行ってもらいたいものに注意を引くことも、ほんのわずかなUIマイクロインタラクションによって実現できます。 今回はこれらのサンプル例を作成するために、Material Motion、IBMのアニメーション原則、Motion in Manifestoのガイドラインを参考にしています。 また今回のサンプル例は、InVision Studio（現在は限定ユーザーのみのアーリーアクセスで、メール登録
次世代のワイヤーフレーム「マイクロフレーム」とは
Marcinは製品デザインのプラットフォームである、UXPinのCEOおよび共同創設者です。2010年にUXPinを共同創設して以来、彼はポーランドのシリコンバレーオフィスの製作チームをリードし手助けしてきました。 「ワイヤーフレームの時代は終わりました。インタラクティブなプロトタイプこそがすべてです。」 私たちは少なくとも７年間は、この主張を聞き続けてきました。もしこのような議論に対して、人気がすべてを証明するというなら、真実はこの主張の逆と言えるでしょう。なぜならワイヤーフレームは終わったらしいと議論され続けているという事実自体が、ワイヤーフレームは顕在で、デザインプロセスにおいて少なくとも一部のプロジェクトやデザイナーに適合する形で存続していることを証明しているからです。 ワイヤーフレームはどのように生き残ってきたのでしょうか？ 実はワイヤーフレームは進化し続けています。 ワイヤーフ
GoodpatchのUIデザイナーがおすすめ UIデザインを理解するためのブックリスト【2021増補版】｜Goodpatch Blog グッドパッチブログ
今回は、GoodpatchのUIデザイナーにヒアリングし、UIデザインを理解するためのおすすめ本をまとめました。 次のような人に特におすすめです。 UIデザイナーになったばかりの人 もっとUIデザインについて勉強したい人 サービス、アプリ開発に携わるエンジニア・ディレクターの人 目的別に6つのカテゴリに分けてご紹介します。あなたの関心に沿ったトピックから、 気になる本を見つけていただけると嬉しいです。 1. UIデザインを基礎から理解する ユーザーインターフェース（UI）とは何なのか、どんなデザイン要素があるのか、UIが機能する環境とは？、どうやって作ってリリースするのか…UIデザインを始めるために、まずは基礎知識を網羅しましょう。 ■ はじめてのUIデザイン 改訂版 この本は、著者の1人である吉竹遼さんが「UIデザインを体系的に学ぶための本が少ない」という課題感から企画されました。そのた
プロダクトリリース前に確認したい23のUXチェックリスト
Fabio Muniz氏はTestLodge社のプロダクトデザイナーであり、製品開発の立ち上げ段階における設計で活躍しています。Fabio Muniz氏の仕事はfabio.designでご覧ください。 ソフトウェアの設計プロセスではプロダクトの欠陥が見つからず、ユーザーが使う段階になって欠陥が明らかになりユーザー体験を損ねてしまうことがあります。 この記事では、そういった事態に陥らないようにチェックしておくべき事項をリストアップしました。ここで挙げるチェックポイントは一般的なものであり多くのプロダクトに適用可能ですが、例外もあることをご理解ください。 インタラクションデザイン 01 - 頻繁に発生する操作が簡単にできるか チェックをする理由：同じ情報を繰り返し入力することは面倒であり、ユーザーの生産性向上に寄与しません。面倒な操作が多ければ、ユーザーはより生産性の高い競合プロダクトへの乗り
デザイナーだけでなくエンジニアもブックマークしておくべきUI/UXの情報を発信するメディア・ブログ6選｜TechClips[テッククリップス]
デザイナーにとっては、聞かない日がないほどトレンドとなっている「UI/UX」という言葉。もはやデザイナーに限らずエンジニアにとっても、UI/UXの概念を理解していることが基本のスキルセットとして必要とされる傾向もあり、これまでのような“モノ”から“コト”を重視する考えが強まっているように思います。 さて、本記事ではそうしたUI/UXの情報を余すことなく発信する国内メディアやブログを紹介。デザイナーはもちろん、エンジニアの方もUI/UXの理解を深める情報源として活用してみてはいかがでしょうか。 UI/UXとは 改めてUI/UXについて簡単にご紹介すると、それぞれの「UI」と「UX」では考え方が違うことに注意しましょう。はじめにUXとは、「ユーザーエクスペリエンス」の略で、いわゆる“体験”を指します。 例えば、「ECサイトで思いがけない好みの商品を見つけ、購入できたときの喜び。」つまり、利用者
![デザイナーだけでなくエンジニアもブックマークしておくべきUI/UXの情報を発信するメディア・ブログ6選｜TechClips[テッククリップス]](https://cdn-ak-scissors.b.st-hatena.com/image/square/442521c6f78a52c5edefd0d08aa7ebf16b21c1ca/height=288;version=1;width=512/https%3A%2F%2Fobject-storage.tyo1.conoha.io%2Fv1%2Fnc_261159609ad84809af5afcb9e5f56abb%2Ftechclips%2Fimages%2F122%2Fimage.png)
サービスデザインで取り入れたい、デザイン思考ツール
ペルソナやカスタマージャーニーマップ、アジャイル開発などなど。 UXやUI開発に携わる人なら知っている、有名なデザイン思考ツールはいろいろあります。 今回は、こういった良く使われているデザイン思考ツールにプラスして取り入れたい、サービスの課題をより深くより広く分析できるようなデザイン思考ツールをご紹介したいと思います。 なぜなぜ分析ユーザーに連続的に質問を重ねることで、UXの表面に現れた現象の背後にある理由を掘り下げていき、ユーザーが抱える問題の本質を分析する手法です。 例えば、飲食店を想定した次のやり取りを見てみましょう。 参考：Marc Stickdorn, Jakob Schneider『THIS IS SERVICE DESIGN THINKING.』（ビー・エヌ・エヌ新社）p.167ランチタイムの接客効率化という問題の裏に、別の問題があったということが良く分かります。同じくサービ
ノンデザイナーも必見！デザインの基礎が学べるスライドまとめ
どんな商品やサービスにおいても、デザインは必ず関わってくる分野です。優れた商品やサービスをつくるためには、チーム全員がデザインに関する基礎知識を身につけておいた方が良いでしょう。 そこで今回は、ノンデザイナーでもデザインを簡単に・楽しく学べるスライドをご紹介します。もちろんデザイナーの方々にとっても役立つものばかりなので、ぜひ参考にしてください！ ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう そもそもデザインって何？という根本的なところから、良いデザインの選び方を具体例を交えて紹介しています。タイトルの通りノンデザイナー向けなので、これからデザインを勉強する人、デザイナーと関わる仕事をしている人は必読です。Q＆A方式でスライドが進んでいくのでさらっと読めます。
intro.js で手軽にチュートリアル機能を作成する - Qiita
最近、チュートリアル機能が表示されるアプリケーションを見かける頻度が増えてきました。 そこで intro.js でチュートリアル機能を作ってみることにしました。 サンプル <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Intro.js Demo</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.1.0/intro.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.1.0/introjs.min.css" rel="stylesheet" type="text/css"> </head> <body
入力フォームにおけるユーザビリティの再確認
ユーザー登録などに必要な入力フォームですが、今もなお使いにくいフォームを見かけることがあります。U-Siteでは入力フォームについて何度も取り上げてきましたので、ここで、これまでの記事を引用して基本をおさらいします。 HCD事業部・宮内 2016年5月12日 イードではHCD関連の調査業務を多数請け負っております。最近ではユーザー理解のための調査が増えていますが、一方で、基本的なユーザビリティ評価業務も日々行っております。その主な内容としては、ユーザビリティテストやヒューリスティック評価によって現状のサイトやアプリの問題点を明らかにし、改善方針を提案するというものがあります。 サイトやアプリの規模、サービスの種類、運用体制などにより、存在するユーザビリティ上の問題点は様々で、新しいデバイスやデザインパターンの出現によっても変化していますが、共通した問題点もあります。その一つが、ユーザー登録
UX課題を”つくる前”に改善！インド発の無料プロトタイピングツールが、人間の仕事を本気で奪いにきてる | Ledge.ai
TOP > Technology > 注目テクノロジー > UX課題を”つくる前”に改善！インド発の無料プロトタイピングツールが、人間の仕事を本気で奪いにきてる こんばんは、イイノです。 つい先日にはAdobeXdのプレビュー版がリリース。プロトタイプが本格的に現場に浸透するぞー！なんて、話題になってますが、個人的にはXdを超える？なんて思えるプロトタイピングツールを発見してしまったので、紹介してみようかなと。 これまでのプロトタイピングツールでは難しかった『複数人プロトタイピングでの挙動をトラッキング分析』や、『個別＆全体での行動をレポーティング』といった機能を搭載し、なんと無料で利用可能にしてしまったという衝撃のツール『CanvasFlip』。 インドの天才たちが作ってくれたこのツールで、プロトタイピングとユーザーテストの手順や手間やコスト、その他もろもろな常識が変わってしまう？…かも
UXデザインのためのユーザー調査・評価手法の選び方とは | UXデザイン会社Standardのブログ
ニールセン博士のユーザー調査のないUXは、UXではない（原文：UX Without User Research Is Not UX）の記事は、読んだことがある方も多いのではないでしょうか。 もちろんユーザー調査などは当たり前のようにやっているサービスもある一方、長年運営していても調査自体を行ったことのないサービスもあるようです。 適切なユーザー調査を行っていないと、新しい施策を考える際にも開発メンバーの思い込みだけで開発が進んでしまい、リリースしたのに誰にも利用されなかったということになりがちです。 また、調査をしていても施策を実施した後に適切な評価を行っていなければ、何が正しくて何が間違っていたかが学べないため次のPDCAには進めず、組織としてのナレッジも蓄積されません。 STANDARDでもUXデザインのご依頼を頂く場合には、基本的にはユーザー調査によりそもそものユーザーの課題はあるか
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと：RoomClip
▼2016/01/25 クラスメソッド×RoomClip×ネイルブック DesignNight http://dev.classmethod.jp/news/design-night-vol-01/ 問い合わせが多かったんですが、使用フォントは「丸丸ゴシック」です RoomClip / http://roomclip.jp/ Read less
お申し込みを1割増やしたフォーム改善の話
http://pepabo.connpass.com/event/14124/ お申し込みを1割増やしたフォーム改善の話Read less
フラットデザイン： 起源、問題、フラット2.0のほうが望ましい理由
フラットデザインとは2012年ごろに広まったWebデザインのスタイルである。それは広く今も利用されているが、過度な利用は深刻なユーザビリティ上の問題を引き起こしかねない。フラットデザインによって発生するユーザビリティ上の最大の課題の1つに、クリック可能な要素のシグニファイア不足がある。フラットデザイン2.0は、それに対する優れた解決策を提供してくれる可能性がある。 Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users by Kate Meyer on September 27, 2015 日本語版2015年11月2日公開 フラットデザインは人気のあるデザインスタイルで、Webページのグラフィック要素に、光沢感や立体感という視覚効果を利用しないもののことである。それは多くのデザイナーからWeb
守ってはいけない、iOSのデザインルール4つ
ページコントロール（ドット）、ページトップの「送信」、プラス（＋）アイコン、並べ替えアイコンの4つは、テストでユーザビリティ上の問題を引き起こすことの多いiOSデザインパターンである。 4 iOS Rules to Break by Aurora Bedford, Raluca Budiu, Kara Pernice, and Amy Schade on July 9, 2015 日本語版2015年8月31日公開 巨大ソフトウェア会社（たとえば、AppleやMicrosoft、Google）はユーザーとデザイナー双方のためにデザインガイドラインを作成している。 おかげで、デザイナーや開発者側は、恵まれた条件のもとで、きちんとしたものになることが期待できるインタフェースの作成を始められるようになり、まったく新しいUI要素を考案する（そしてテストする）必要がない。 一方、ユーザー側も、すべての
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.ogura.blog/entry/2017/02/28/190245
よくわかるダメUI/UX画像コレクション - DOCUMENTS.TIPS
【永久保存版】エンジニア・デザイナー必見！「UI/UX」の基礎が学べるSlideshare30選
日本中の「UI/UX」の参考になるスライド資料を気合いで全部集めました！（たぶん） | BtoBサービスキューレーション Boxil（ボクシル）まとめ！
