エンジニアのためのUX入門

Dec 22, 2011140 likes75,830 views

This document discusses several key concepts in UI/UX design including user experience (UX), user interface (UI), information architecture (IA), interaction design, affordances, and the evolution of design approaches. It provides examples of early interfaces like Apple's Knowledge Navigator and how interfaces are now more conversational like Siri. The document also references several important thinkers that have influenced design such as Norman, Gibson, and Reeves/Nass's work on how users interact with media.

UX
UI / UX / IA
2011.12.07
kchinda@aiming-inc.com
(a.k.a. @ckazu)

• •

http://www.seiko-watch.co.jp/p_search/detail/do.php?no=SBPG003
http://store.apple.com/us/product/MB829LL/A

UX
• UX (User Experience) • HI (Human Interface)
• UI (User Interface) • Interactive Design
• IA • Interactive System
(Information Architecture)
• Man-Machine Interface
• HCD
• Tangible
(Human Centered Design)
• HCI
• Ubiquitous
(Human Computer Interaction)
• Usability
• etc...

http://www.kickerstudio.com/blog/images/ux.jpg

•

•
• http://ja.wikipedia.org/wiki/

•H.
• http://ja.wikipedia.org/wiki/
• http://ja.wikipedia.org/wiki/

•
•
• Daniel Dennett, “Cognitive Wheels : The Frame Problem of AI,” The Philosophy of
Artiﬁcial Intelligence, Margaret A. Boden, Oxford University Press, 1984, pp.
147-170.

cite: http://www.cs.sfu.ca/~vaughan/teaching/415/papers/dennett-
cognitivewheels.html

http://www.google.co.jp/search?q=
&hl=ja&prmd=imvns&source=lnms&tbm=isch&ei=cT3mTvnjL67BiQf0lKi2BQ&sa=X&oi=mode_link&ct=mode&cd=2&ved=0CEUQ_
AUoAQ&biw=1366&bih=768

•
•
•

User Interface

• 1987

• Knowledge Navigator

http://video.google.com/videoplay?docid=-5144094928842683632

User Interface

• 1987, Apple Inc.

• Knowledge Navigator

• Apple

User Interface

• 2011, Apple Inc.

• siri

•

User Interface

• 1996, B. Reeves, C. Nass,
The Media Equation

• “Media = Real Life”

•

• design

•

•
→

•
→ (design)

•
→ brain storming

• D. Norman,

• J. J. Gibson,

• , ―

• , , ,

• B. Reeves, C. Nass,

• , IA

デザインは小さなテキストから始まります。コンテンツを膨大に抱える大規模なサイトでも、ユーザーにコンテンツ作成を委ねる小さなアプリケーションでも小さなテキストが行動の変化に繋がる場合があります。コンテンツがある状態でデザインするのと、何もないままスタートするのでは大きな差が生まれます。 UI デザインの話になると、ビジュアルやインタラクションが話題の中心になりがちですが、コンテンツも UI です。なぜコンテンツが UI デザインにおいて重要なのかを解説すると共に、今セッションでは小さなテキストの工夫からはじまるデザインについて、幾つかのケーススタディーをみながら傾向と対策を紹介します。

Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜Chihiro Tomita

デブサミ2013（Developers Summit 2013）Action! 1日目のデザインセッション「デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜」の発表資料（2013年2月14日） -------------------------------------------------- 途中、時間がなくて話せなかったところも入っています（そこがかなりいい話だったりする）ので、やっぱりここも実際に聞きたい！という方はまたどこかで呼んでくださいm(_ _)m よろしくお願いします。

UI＆UX / 重要なのは、毎日さわって嬉しい UI UX! Akiko Ohtsuka

「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライドTakayuki Fukatsu

【14-E-5】現場で役立つＵＸ～エンタープライズＵＸの現在とこれから～Shinji Semba

企画が考えるスマホUIデザインKatsumi Mizushima

Webデザインのセオリーを学ぼうToshiaki Sasaki

マークアップエンジニアと情報アーキテクチャ力也伊原

Ustream:ワイヤーコミュニケーション第２回 http://www.ustream.tv/recorded/7738057 Togetter:お気に入り第2回「ワイヤーフレームコミュニケーション研究会」 - ハッシュタグ " #wireframecomwg " まとめ http://togetter.com/li/30127 「ワイヤーフレームコミュニケーション研究会第2回」のお知らせ http://blog.sinap.jp/2010/05/wireframecomwg02-cm.html

ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえようSasaki Kouhei

ビジネスマン必見！キレイな提案書を作るためのデザインの基礎知識Tsutomu Sogitani

パワーポイントのデザインで苦労していませんか？良いデザインはセンスがないと、と諦めていませんか？しかし、提案書のデザインはセンスで作るものではありません。基本的なルールさえつかめば、誰でも、最高のデザインではなくとも、最善のデザインに仕上げることができます。その「基本的なルール」をまとめてみました。ビジネスマンが主体業務ではないデザインで苦しむ時間は無駄以外の何物でもありません。このスライドで、皆さんがデザインに割かれる時間を軽減し、本来必要とされる業務に集中できるようになれば幸いです。

EC-CUBEプラグイン講義ria1201

Illustratorのカンプとうまく付き合う方法Takuya Nishitani

WordPress初心者からの脱出! カスタムなんとかをちゃんと理解するTakashi Uemura

「カスタムフィールド」「カスタム投稿タイプ」「カスタムタクソノミー」「カスタムメニュー」など、カスタムカスタム言い過ぎなWordPressですが、そういった機能をちゃんと理解するのはわりと難しいし、ちゃんと理解している人は少ないのではないかと思います。(僕も正確に理解していません) なので、自分の勉強も兼ねて、カスタム系機能を整理しています。 2013/1/5に WordBench神戸で発表した資料です。

Photoshopで効率よくデザインしよう！Marie Suenaga

WordPressで作るポートフォリオサイトTakuma Nishiyama

HTML5時代のWebデザインmasaaki komori

レスポンシブ・ウェブデザイン基礎masaaki komori

最近のブラウザ状況yoshikawa_t

文系デザイナーでも大丈夫！レスポンシブWEBサイトをWordPressで作ってみようJunko Nukaga

エンジニアが知っておくべきSSL/TLSの知識(仮)Masahiro NAKAYAMA

「Webデザイナーのためのタイポグラフィと文字組版」swwwitch inc.

.htaccessによるリダイレクト徹底解説Cherry Pie Web

サーバ運用の現場でひたすら監視し続けるエンジニアの手の内のすべてMasahito Zembutsu

⑯jQueryをおぼえよう！その２Nishida Kansuke

WordPressプラグイン作成入門Yuji Nojima

本資料は、WordPress のプラグイン作成の基本を解説しています。エンジニア寄りの解説ですが、デザイナーさんにも読んで頂ける内容かと思います。セッション内容の出典は WordBench 神戸の元管理人 @horike37 さんです。ご本人に確認して本セッションでの利用の許可いただきました。僕自身は、@horike37 さんのセッションでWordPress に感動し、WordPress の活用に目覚めた人でございます。本セッションでも、その感動を共有できたらと思っています。

スマホデザインパターンなうAndroid UI勉強会

WordPress を使いこなそうWataru OKAMOTO

로봇Ux in the 4th industrial Revolution era Andy Daeyol Na(나대열)

This document contains a collection of links to various articles and websites about topics related to robots, artificial intelligence, and human-robot interaction. Some of the links are about specific robots like Cozmo and social robots at CES 2017 that had similar appearances. Other links discuss topics like the uncanny valley effect, robotic workforces, and CGI humans. The document seems to be gathering various online resources on AI and robotics technologies without much additional context or analysis.

G so c-2013-preso-np_Nepali TranslationSovita Dahal

More Related Content

Viewers also liked (20)

マークアップエンジニアと情報アーキテクチャ力也伊原

ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえようSasaki Kouhei

ビジネスマン必見！キレイな提案書を作るためのデザインの基礎知識Tsutomu Sogitani

EC-CUBEプラグイン講義ria1201

Illustratorのカンプとうまく付き合う方法Takuya Nishitani

WordPress初心者からの脱出! カスタムなんとかをちゃんと理解するTakashi Uemura

Photoshopで効率よくデザインしよう！Marie Suenaga

WordPressで作るポートフォリオサイトTakuma Nishiyama

HTML5時代のWebデザインmasaaki komori

レスポンシブ・ウェブデザイン基礎masaaki komori

最近のブラウザ状況yoshikawa_t

文系デザイナーでも大丈夫！レスポンシブWEBサイトをWordPressで作ってみようJunko Nukaga

エンジニアが知っておくべきSSL/TLSの知識(仮)Masahiro NAKAYAMA

「Webデザイナーのためのタイポグラフィと文字組版」swwwitch inc.

.htaccessによるリダイレクト徹底解説Cherry Pie Web

サーバ運用の現場でひたすら監視し続けるエンジニアの手の内のすべてMasahito Zembutsu

⑯jQueryをおぼえよう！その２Nishida Kansuke

WordPressプラグイン作成入門Yuji Nojima

スマホデザインパターンなうAndroid UI勉強会

WordPress を使いこなそうWataru OKAMOTO

マークアップエンジニアと情報アーキテクチャ力也伊原

ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえようSasaki Kouhei

ビジネスマン必見！キレイな提案書を作るためのデザインの基礎知識Tsutomu Sogitani

EC-CUBEプラグイン講義ria1201

Illustratorのカンプとうまく付き合う方法Takuya Nishitani

WordPress初心者からの脱出! カスタムなんとかをちゃんと理解するTakashi Uemura

Photoshopで効率よくデザインしよう！Marie Suenaga

WordPressで作るポートフォリオサイトTakuma Nishiyama

HTML5時代のWebデザインmasaaki komori

レスポンシブ・ウェブデザイン基礎masaaki komori

最近のブラウザ状況yoshikawa_t

文系デザイナーでも大丈夫！レスポンシブWEBサイトをWordPressで作ってみようJunko Nukaga

エンジニアが知っておくべきSSL/TLSの知識(仮)Masahiro NAKAYAMA

「Webデザイナーのためのタイポグラフィと文字組版」swwwitch inc.

.htaccessによるリダイレクト徹底解説Cherry Pie Web

サーバ運用の現場でひたすら監視し続けるエンジニアの手の内のすべてMasahito Zembutsu

⑯jQueryをおぼえよう！その２Nishida Kansuke

WordPressプラグイン作成入門Yuji Nojima

スマホデザインパターンなうAndroid UI勉強会

WordPress を使いこなそうWataru OKAMOTO

Similar to エンジニアのためのUX入門 (20)

로봇Ux in the 4th industrial Revolution era Andy Daeyol Na(나대열)

G so c-2013-preso-np_Nepali TranslationSovita Dahal

Future of UISean Gerety

The document discusses the future of displays, interactions, and user interfaces. It predicts that displays will be everywhere in the future, including on surfaces like tables, walls, windows, vehicles and ceilings. It also discusses new types of interactions made possible by ubiquitous displays and large data streams, including gesture, speech recognition, motion graphics and transitional apps. The document recommends several designers to watch who create fantasy user interfaces for films.

Introduction to Information Architecture and Design - SVA Workshop 0929Robert Stribley

This document provides an overview of the tapestry "Tapestry of the Thousand Longest Rivers in the World" created by Alighiero Boetti from 1976-1982. The tapestry depicts a map of the world showing the locations of the thousand longest rivers. It is a complex work that required extensive research to identify all the relevant rivers and plot their paths across multiple panels that were later joined together. The tapestry reflects Boetti's interest in geography and world maps through an unconventional artistic medium.

Introduction to Information Architecture and Design - SVA Workshop 03/23/13Robert Stribley

The document provides an overview of an information architecture workshop given by Robert Stribley on March 23, 2013. The workshop agenda covers background topics on information architecture including definitions, history and the design process. It then discusses the goals and deliverables of the workshop. Specific activities covered in the workshop include user research, competitive reviews, personas, card sorting, site maps, wireframes and prototypes.

สร้างสรรค์กิจกรรมการเรียนรู้ที่มีความหมาย ด้วยสื่อ Learning Object AngAng_ETC

The document discusses various aspects of designing effective learning objects (LOs) for teaching mathematics at the secondary school level. It covers topics like LO metadata, instructional design approaches, storyboarding, feedback mechanisms, usability testing, and technical considerations. The key goals of LOs are to transition students from passive to active learning, bridge the digital divide, and close gaps in understanding through interactive, personalized instructional experiences.

Introduction to Information Architecture and Design - SVA Workshop 021613Robert Stribley

The document provides an overview of an information architecture workshop for the Events.com website redesign project. It includes an agenda for the workshop covering topics like user research, competitive analysis, personas, card sorting, site maps, wireframes and more. A summary of key points includes discussing conducting user surveys and interviews to understand how people learn about and attend events, reviewing competitor websites to identify strengths and weaknesses, and creating personas based on user research to represent different types of event attendees.

Introduction to Information Architecture and Design - SVA Workshop 120812Robert Stribley

The document summarizes an artwork titled "Tapestry of the Thousand Longest Rivers in the World" created by artist Alighiero Boetti from 1976-1982. The artwork consisted of a tapestry depicting the thousand longest rivers in the world based on data provided by UNESCO. Boetti commissioned Afghan women to embroider the tapestry by hand, with the names of the rivers written in the local languages. The tapestry took six years to complete and measures over 16 feet wide.

Games Design 2 - Lecture 12 - Usability, Metaphor and LayoutDavid Farrell

This document discusses various principles of usability, metaphors, and layout in game design. It covers attributes of usability like learnability and satisfaction. It provides examples of interface metaphors like the mouse representing a hand. Layout principles discussed include the rule of thirds and golden ratio for positioning elements, as well as using grids to align elements. The document stresses considering human abilities and designing for consistency and avoiding clutter.

Introduction to Information Architecture and Design - SVA Workshop 0712Robert Stribley

The document provides an overview of an information architecture workshop being conducted by Robert Stribley. The agenda outlines the topics to be covered, including background on information architecture, the design process, user research, competitive reviews, personas, card sorting, site maps, wireframes and navigation. The goals of the workshop are to understand user experience design concepts and processes, experience a typical project, and review common information architect deliverables.

CX Design and Journey Mapping for Social ThinkersJohn Kembel

Detecting Signals from Real-time Social Web Artificial Intelligence Institute at UofSC

Introduction to Information Architecture and Design - SVA Workshop 062312Robert Stribley

SVA Workshop - Fall 121011Robert Stribley

在快速迭代的互联网产品团队如何进行以用户为中心的设计ariamax

This document discusses user experience (UX) and provides tips on how to improve UX design. It recommends knowing about users' needs and how to meet them. Specific tips include conducting user research, testing prototypes, considering the user's environment and goals, and focusing on simplicity, meaning and emotion in design. The document emphasizes an iterative design process and shares examples of companies with strong UX practices.

How Do I UX by Quick LeftQuick Left, Inc.

User Experience Design, or UX Design, is often a mystifying term thrown around in sales pitches, conferences, client engagements, and the like, but what does it really entail? Any successful application is always built, at its core, around problem solving. Take a look through the presentation to see how we approach UX Design here at Quick Left. We’ll help navigate through all the buzz words, and get down to real world examples of successful user experience design. This is part one of a two part series. Part two coming soon.

Detecting Signals from Real-time Social Web Artificial Intelligence Institute at UofSC

The document discusses using semantics and social network analysis to detect signals from real-time social web data, such as citizen reports on events, in order to understand social perceptions and extract insights. It presents examples of tools like Twitris that analyze tweets about news events and the BBC SoundIndex that tracks online music popularity. The research aims to better understand how social media can be used as a proxy for tracking popular opinions, events, and buying preferences.

SVA Workshop 021112Robert Stribley

The document discusses information architecture concepts including defining personas based on user research for an events website project. It provides examples of personas including Sabrina, a party planner in New York City who loves finding events, and Jerry, a visitor from Ohio who uses the web to research trips and attractions. The personas are meant to represent different user types to help guide information architecture decisions for the site redesign.

SVA Workshop 032512Robert Stribley

Atlas Hugged: How Atlassian Tools Enabled a Software Internalization TeamAtlassian