SlideShare a Scribd company logo
1 of 116
Download to read offline
Magnetic Interactivity
The plan
The plan
    Introductions
•
The plan
  Introductions
•
• About Users
The plan
  Introductions
•
• About Users
• Break
The plan
  Introductions
•
• About Users
• Break
• Stereotypes and Things You Should Know
The plan
  Introductions
•
• About Users
• Break
• Stereotypes and Things You Should Know
• Break
The plan
  Introductions
•
• About Users
• Break
• Stereotypes and Things You Should Know
• Break
• Interactivity Training
The plan
  Introductions
•
• About Users
• Break
• Stereotypes and Things You Should Know
• Break
• Interactivity Training
• Celebrate
Dan Mall
Philly representin’
Interactive Director at Happy Cog and
tech editor for A List Apart
Married for 7 months
Love Flash work
Designer, art director, teacher, singer,
coder, husband, author, speaker,
wrestler, son, writer, blogger, brother...
Sunkist addict
You?
What do users want?
Users want to love.
Magnetic Interactivity
Magnetic Interactivity
Magnetic Interactivity
Our emotions change the way we
think, and serve as constant guides
 to appropriate behavior, steering us
      away from the bad, guiding us
                   towards the good.
                    —Don Norman, Emotional Design
What do users expect?
DEFAULT ELEMENTS
Magnetic Interactivity
Magnetic Interactivity
Magnetic Interactivity
Magnetic Interactivity
Users want to know what’s going on.
Magnetic Interactivity
Magnetic Interactivity
TYPOGRAPHY
What makes readers respond
TYPOGRAPHY
    What makes readers respond

    Inherently interesting content
•
TYPOGRAPHY
    What makes readers respond

    Inherently interesting content
•
    Multilevel readership that encourages scanning
•
TYPOGRAPHY
    What makes readers respond

    Inherently interesting content
•
    Multilevel readership that encourages scanning
•
    Headlines that make me want to know more
•
TYPOGRAPHY
    What makes readers respond

    Inherently interesting content
•
    Multilevel readership that encourages scanning
•
    Headlines that make me want to know more
•
    Subheads that complete the story
•
TYPOGRAPHY
    What makes readers respond

    Inherently interesting content
•
    Multilevel readership that encourages scanning
•
    Headlines that make me want to know more
•
    Subheads that complete the story
•
    Intriguing captions
•
TYPOGRAPHY
    What makes readers respond

    Inherently interesting content
•
    Multilevel readership that encourages scanning
•
    Headlines that make me want to know more
•
    Subheads that complete the story
•
    Intriguing captions
•
    Well-built text
•
TYPOGRAPHY
     What makes readers respond

     Inherently interesting content
 •
     Multilevel readership that encourages scanning
 •
     Headlines that make me want to know more
 •
     Subheads that complete the story
 •
     Intriguing captions
 •
     Well-built text
 •


—Alex White, Thinking in Type
Magnetic Interactivity
Magnetic Interactivity
Magnetic Interactivity
Magnetic Interactivity
Magnetic Interactivity
LAYOUT AND GRID
The purpose of a grid

“Information presented with clear and logically set out
titles, subtitles, texts, illustrations, and captions will not
only be read more quickly and easily but the information
will also be better understood and retained in memory.
This is a scientifically proved fact and the designer
should bear it in mind constantly.”
—Josef Müller-Brockman, Grid systems in graphic design
Magnetic Interactivity
Magnetic Interactivity
Magnetic Interactivity
NEGATIVE SPACE
Grouping and order

“Shape and composition have a direct impact on viewer
perception. When elements are not grouped and each is
surrounded by white space, the surrounding spaces are
many and the composition appears chaotic and
unorganized. As elements are grouped, the white spaces
become fewer and larger, and a simplified more cohesive
perception of the composition is created.”
—Kimberly Elam, Grid Systems
Magnetic Interactivity
MOVEMENT
  Movement is very attractive, so it should be used carefully

   “Movement should help you understand the interrelatedness or
   sequence of information you’re presenting. The audience
   should be able to process the information in the order that the
   movement presents it.”
   —Nancy Duarte, slide:ology

• Movement softens transitions
• No snapping
• “Something is happening” vs. “Something happened”
Magnetic Interactivity
ANIMATION
Animation should be natural and alive

“The word animation is derived from the Latin word anima,
which loosely means ‘the breath of life.’ Most presentation
animation sucks the life out of the audience instead of
breathing life into it.
—Nancy Duarte, slide:ology


“Control timing to capture the
audience. Timing conveys a
character’s thought process
and emotions, and strengthens
story points.”
—John Lasseter, Timing for Animation
Magnetic Interactivity
Magnetic Interactivity
HTML
A structural markup language

“All web pages are written with HTML. [It] lets you format
text, add graphics, sound, and video... [It] has 2 essential
features—hypertext and universality. Hypertext means
you can create a link in a Web page or to practically
anything else on the Internet. Universality means that
virtually any computer can read a Web page. The Web is
open to all.”
—Elizabeth Castro, HTML 4 for the World Wide Web
CSS
A presentational language, used for styling

“With CSS, it became possible to control how a page looked
externally and to separate the presentational aspect of a
document from its content. Presentational tags could be
ditched, and layout could be controlled using CSS instead
of tables. Markup could be made simple again, and people
began to develop a newfound interest in underlying code.”
—Andy Budd, Cameron Moll & Simon Collison, CSS Mastery
JAVASCRIPT
A behavioral language that controls interaction

“JavaScript is used to add dynamic behavior to your
website. The things that happen when you interact with the
page—by clicking a button, dragging an image, or moving
the mouse—are defined in JavaScript. It works with the
Document Object Model to attach actions to different
events (mouseovers, drags, and clicks).”
—Stuart Langridge, DHTML Utopia: Modern Web Design Using
JavaScript & DOM
FLASH
A feature-rich application with a long history

“Flash has a powerful programming language, a bucket full
of filter and blending tools, and cross-product integration
with tools like Illustrator, Photoshop, and Flex to help you
make great animation, applications, or motion design. It’s
an incredible tool for expressing your creativity, style, and
unique ideas.”
—Jen deHaan, How to Cheat in Adobe Flash CS3
AJAX
Desktop-like experience on the web

Ajax isn’t a technology. It’s really several technologies,
each flourishing in its own right, coming together in
powerful new ways. Ajax incorporates:




—Jesse James-Garrett, Ajax: A New Approach to Web Applications
AJAX
    Desktop-like experience on the web

    Ajax isn’t a technology. It’s really several technologies,
    each flourishing in its own right, coming together in
    powerful new ways. Ajax incorporates:
    standards-based presentation using XHTML and CSS;
•




    —Jesse James-Garrett, Ajax: A New Approach to Web Applications
AJAX
    Desktop-like experience on the web

    Ajax isn’t a technology. It’s really several technologies,
    each flourishing in its own right, coming together in
    powerful new ways. Ajax incorporates:
    standards-based presentation using XHTML and CSS;
•
    dynamic display and interaction using the Document Object Model;
•




    —Jesse James-Garrett, Ajax: A New Approach to Web Applications
AJAX
    Desktop-like experience on the web

    Ajax isn’t a technology. It’s really several technologies,
    each flourishing in its own right, coming together in
    powerful new ways. Ajax incorporates:
    standards-based presentation using XHTML and CSS;
•
    dynamic display and interaction using the Document Object Model;
•
    data interchange and manipulation using XML and XSLT;
•




    —Jesse James-Garrett, Ajax: A New Approach to Web Applications
AJAX
    Desktop-like experience on the web

    Ajax isn’t a technology. It’s really several technologies,
    each flourishing in its own right, coming together in
    powerful new ways. Ajax incorporates:
    standards-based presentation using XHTML and CSS;
•
    dynamic display and interaction using the Document Object Model;
•
    data interchange and manipulation using XML and XSLT;
•
    asynchronous data retrieval using XMLHttpRequest;
•




    —Jesse James-Garrett, Ajax: A New Approach to Web Applications
AJAX
    Desktop-like experience on the web

    Ajax isn’t a technology. It’s really several technologies,
    each flourishing in its own right, coming together in
    powerful new ways. Ajax incorporates:
    standards-based presentation using XHTML and CSS;
•
    dynamic display and interaction using the Document Object Model;
•
    data interchange and manipulation using XML and XSLT;
•
    asynchronous data retrieval using XMLHttpRequest;
•
    and JavaScript binding everything together.
•


    —Jesse James-Garrett, Ajax: A New Approach to Web Applications
WEB STANDARDS
Separation of content, style, and behavior

“Web standards are the tools with which all of us can
design and build sophisticated, beautiful sites that will
work as well tomorrow as they do today.”
—Jeffrey Zeldman, Designing With Web Standards
PROGRESSIVE ENHANCEMENT
  Web design strategy that focuses on content

   “Begin with the basic version, then add enhancements for
   those who can handle them.”
   —http://accessites.org/site/2007/02/graceful-degradation-progressive-
   enhancement/2/

• http://www.alistapart.com/articles/understandingprogressiveenhancement
• http://www.hesketh.com/publications/inclusive_web_design_for_the_future/
• http://en.wikipedia.org/wiki/Progressive_enhancement
Magnetic Interactivity
Magnetic Interactivity
DESIGNING A LINK
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu
fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu
fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu
fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu
fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu
fugiat nulla pariatur.
LINK TEXT
John Coltrane’s ‘A Love Supreme’ is on sale at iTunes for $7.99.
John Coltrane’s ‘A Love Supreme’ is on sale at iTunes for $7.99.
John Coltrane’s ‘A Love Supreme’ is on sale at iTunes for $7.99.
John Coltrane’s ‘A Love Supreme’ is on sale at iTunes for $7.99.
John Coltrane’s ‘A Love Supreme’ is on sale at iTunes for $7.99.
John Coltrane’s ‘A Love Supreme’ is on sale at iTunes for $7.99.
John Coltrane’s ‘A Love Supreme’ is on sale at iTunes for $7.99.
SOME THINGS TO REMEMBER
CONSISTENCY
Users demand it. There’s no way around that.
Magnetic Interactivity
Magnetic Interactivity
Magnetic Interactivity
THOROUGHNESS
Plan for everything.
Magnetic Interactivity
APPROPRIATENESS
Effects should exist for a very specific reason.
Magnetic Interactivity
CHOOSING TECHNOLOGIES
Should you use…
HTML?
HTML?
Yes.
HTML?
Yes.

As long as it’s web content.
CSS?
CSS?
Maybe, depending on the average user agents for the
intended audience.
CSS?
Maybe, depending on the average user agents for the
intended audience.

Most of the time, you’ll want to use this.
JAVASCRIPT?
JAVASCRIPT?
Only if you’re looking to modify the existing page structure.
JAVASCRIPT vs. AJAX
JAVASCRIPT vs. AJAX
JavaScript is a client-side scripting language that allows
you to manipulate the structure of the page.
JAVASCRIPT vs. AJAX
JavaScript is a client-side scripting language that allows
you to manipulate the structure of the page.

Ajax uses JavaScript to edit the structure of the page,
without being constrained to the data already loaded.
JAVASCRIPT vs. AJAX
AJAX OR NO AJAX?
JavaScript is a client-side scripting language that allows
you to manipulate the structure of the page.

Ajax uses JavaScript to edit the structure of the page,
without being constrained to the data already loaded.
AJAX vs. FLASH
AJAX vs. FLASH
JAVASCRIPT OR FLASH?
AJAX vs. FLASH
JAVASCRIPT OR FLASH?
JavaScript is good for manipulating structure.
AJAX vs. FLASH
JAVASCRIPT OR FLASH?
JavaScript is good for manipulating structure.

Flash is good for enhancing structure.
AJAX vs. FLASH
JAVASCRIPT OR FLASH?
JAVASCRIPT + FLASH
AJAX vs. FLASH
  JAVASCRIPT OR FLASH?
  JAVASCRIPT + FLASH
• SWFObject
AJAX vs. FLASH
  JAVASCRIPT OR FLASH?
  JAVASCRIPT + FLASH
• SWFObject
• Variables
AJAX vs. FLASH
  JAVASCRIPT OR FLASH?
  JAVASCRIPT + FLASH
• SWFObject
• Variables
• Dynamic data, driven by HTML
IS THIS JUST A CRASH
COURSE OF EVERYTHING
WE ALREADY KNOW?
Magnetic Interactivity
Magnetic Interactivity
Magnetic Interactivity
“It took 34 years for
me to draw that logo
in 4 seconds.”
—Paula Scher
Use real life as your guide.
Magnetic Interactivity
SOME GUIDELINES
Tips for Brainstorming
SOME GUIDELINES
    Tips for Brainstorming

    Every idea is good
•
SOME GUIDELINES
    Tips for Brainstorming

  Every idea is good
•
• What if...?
SOME GUIDELINES
    Tips for Brainstorming

  Every idea is good
•
• What if...?
• Techniques, not technology
SPLITTING UP
THE BRIEF
Catering to a specific user

Imagine that Carsonified approached your
team to design next year’s Future of Web
Design site.
Magnetic Interactivity

More Related Content

Viewers also liked

Viewers also liked (13)

Cultur Krn Ind Cover Preface Krn Growth
Cultur  Krn  Ind  Cover Preface  Krn GrowthCultur  Krn  Ind  Cover Preface  Krn Growth
Cultur Krn Ind Cover Preface Krn Growth
 
Pentagon News Letter - April 2011 Edition
Pentagon News Letter - April 2011 EditionPentagon News Letter - April 2011 Edition
Pentagon News Letter - April 2011 Edition
 
Cultur Krn Ind C1 ~ P.47
Cultur  Krn  Ind C1 ~ P.47Cultur  Krn  Ind C1 ~ P.47
Cultur Krn Ind C1 ~ P.47
 
BE YOUR BEST - LEADER
BE YOUR BEST - LEADERBE YOUR BEST - LEADER
BE YOUR BEST - LEADER
 
2008-2009 ECE Art Work
2008-2009 ECE Art Work2008-2009 ECE Art Work
2008-2009 ECE Art Work
 
Jodi Unruh & Associates, LLC
Jodi Unruh & Associates, LLCJodi Unruh & Associates, LLC
Jodi Unruh & Associates, LLC
 
Escondido
EscondidoEscondido
Escondido
 
GEMS Squad
GEMS SquadGEMS Squad
GEMS Squad
 
Madurodam
MadurodamMadurodam
Madurodam
 
Losmedicos
LosmedicosLosmedicos
Losmedicos
 
Gandhi
GandhiGandhi
Gandhi
 
Fotos Arcangel
Fotos ArcangelFotos Arcangel
Fotos Arcangel
 
Festa auguri Rotary Club Presidenza Villano, 2000-01)
Festa auguri Rotary Club Presidenza Villano, 2000-01)Festa auguri Rotary Club Presidenza Villano, 2000-01)
Festa auguri Rotary Club Presidenza Villano, 2000-01)
 

Similar to Magnetic Interactivity

Rapid Prototyping With J Query
Rapid Prototyping With J QueryRapid Prototyping With J Query
Rapid Prototyping With J QueryBootstrap
 
Yvonne Doll, Designing Content for Usability
Yvonne Doll, Designing Content for UsabilityYvonne Doll, Designing Content for Usability
Yvonne Doll, Designing Content for Usabilitywebcontent2007
 
Programming for Non-Programmers - SXSW Vegas 2014
Programming for Non-Programmers - SXSW Vegas 2014Programming for Non-Programmers - SXSW Vegas 2014
Programming for Non-Programmers - SXSW Vegas 2014Chris Castiglione
 
Programming for Non-programmers PFNP @ Razorfish
Programming for Non-programmers PFNP @ Razorfish Programming for Non-programmers PFNP @ Razorfish
Programming for Non-programmers PFNP @ Razorfish Chris Castiglione
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesiabrucelawson
 
Responsive Process HOW Interactive
Responsive Process HOW InteractiveResponsive Process HOW Interactive
Responsive Process HOW InteractiveSteve Fisher
 
Taking the Reins: Website Redesign by the Librarians, for the Users
Taking the Reins: Website Redesign by the Librarians, for the UsersTaking the Reins: Website Redesign by the Librarians, for the Users
Taking the Reins: Website Redesign by the Librarians, for the UsersMark O'English
 
ChatGPT-and-Generative-AI-Landscape Working of generative ai search
ChatGPT-and-Generative-AI-Landscape Working of generative ai searchChatGPT-and-Generative-AI-Landscape Working of generative ai search
ChatGPT-and-Generative-AI-Landscape Working of generative ai searchrohitcse52
 
Intro to UX Design
Intro to UX DesignIntro to UX Design
Intro to UX Designjayyearley
 
NAP review
NAP reviewNAP review
NAP reviewpducy
 
One Web To Rule Them All
One Web To Rule Them AllOne Web To Rule Them All
One Web To Rule Them AllDen Odell
 
Rich User Experience Documentation - Update
Rich User Experience Documentation - UpdateRich User Experience Documentation - Update
Rich User Experience Documentation - UpdateJohn Yesko
 
Open Source and the MEAN stack
Open Source and the MEAN stackOpen Source and the MEAN stack
Open Source and the MEAN stackLiran Tal
 
Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit
Responsive Experience Design (RXD): A holistic approach to web - UXDEV SummitResponsive Experience Design (RXD): A holistic approach to web - UXDEV Summit
Responsive Experience Design (RXD): A holistic approach to web - UXDEV SummitMike Donahue
 
Stolley Book review
Stolley Book reviewStolley Book review
Stolley Book reviewmzedalis
 
Planning JavaScript and Ajax for larger teams
Planning JavaScript and Ajax for larger teamsPlanning JavaScript and Ajax for larger teams
Planning JavaScript and Ajax for larger teamsChristian Heilmann
 
Usable Language | How Content Shapes The User Experience
Usable Language | How Content Shapes The User ExperienceUsable Language | How Content Shapes The User Experience
Usable Language | How Content Shapes The User ExperienceRandall Snare
 

Similar to Magnetic Interactivity (20)

Rapid Prototyping With J Query
Rapid Prototyping With J QueryRapid Prototyping With J Query
Rapid Prototyping With J Query
 
Yvonne Doll, Designing Content for Usability
Yvonne Doll, Designing Content for UsabilityYvonne Doll, Designing Content for Usability
Yvonne Doll, Designing Content for Usability
 
Programming for Non-Programmers - SXSW Vegas 2014
Programming for Non-Programmers - SXSW Vegas 2014Programming for Non-Programmers - SXSW Vegas 2014
Programming for Non-Programmers - SXSW Vegas 2014
 
Programming for Non-programmers PFNP @ Razorfish
Programming for Non-programmers PFNP @ Razorfish Programming for Non-programmers PFNP @ Razorfish
Programming for Non-programmers PFNP @ Razorfish
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesia
 
Responsive Process HOW Interactive
Responsive Process HOW InteractiveResponsive Process HOW Interactive
Responsive Process HOW Interactive
 
Taking the Reins: Website Redesign by the Librarians, for the Users
Taking the Reins: Website Redesign by the Librarians, for the UsersTaking the Reins: Website Redesign by the Librarians, for the Users
Taking the Reins: Website Redesign by the Librarians, for the Users
 
ChatGPT-and-Generative-AI-Landscape Working of generative ai search
ChatGPT-and-Generative-AI-Landscape Working of generative ai searchChatGPT-and-Generative-AI-Landscape Working of generative ai search
ChatGPT-and-Generative-AI-Landscape Working of generative ai search
 
Intro to UX Design
Intro to UX DesignIntro to UX Design
Intro to UX Design
 
NAP review
NAP reviewNAP review
NAP review
 
One Web To Rule Them All
One Web To Rule Them AllOne Web To Rule Them All
One Web To Rule Them All
 
Rich User Experience Documentation - Update
Rich User Experience Documentation - UpdateRich User Experience Documentation - Update
Rich User Experience Documentation - Update
 
What’s Up, EDoc?!
What’s Up,EDoc?!What’s Up,EDoc?!
What’s Up, EDoc?!
 
Open Source and the MEAN stack
Open Source and the MEAN stackOpen Source and the MEAN stack
Open Source and the MEAN stack
 
Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit
Responsive Experience Design (RXD): A holistic approach to web - UXDEV SummitResponsive Experience Design (RXD): A holistic approach to web - UXDEV Summit
Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit
 
Stolley Book review
Stolley Book reviewStolley Book review
Stolley Book review
 
Planning JavaScript and Ajax for larger teams
Planning JavaScript and Ajax for larger teamsPlanning JavaScript and Ajax for larger teams
Planning JavaScript and Ajax for larger teams
 
Usable Language | How Content Shapes The User Experience
Usable Language | How Content Shapes The User ExperienceUsable Language | How Content Shapes The User Experience
Usable Language | How Content Shapes The User Experience
 
Mobile ux sot a and challenges
Mobile ux sot a and challengesMobile ux sot a and challenges
Mobile ux sot a and challenges
 
Mobile UX Challenges
Mobile UX ChallengesMobile UX Challenges
Mobile UX Challenges
 

Recently uploaded

Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 

Recently uploaded (20)

Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 

Magnetic Interactivity

  • 3. The plan Introductions •
  • 4. The plan Introductions • • About Users
  • 5. The plan Introductions • • About Users • Break
  • 6. The plan Introductions • • About Users • Break • Stereotypes and Things You Should Know
  • 7. The plan Introductions • • About Users • Break • Stereotypes and Things You Should Know • Break
  • 8. The plan Introductions • • About Users • Break • Stereotypes and Things You Should Know • Break • Interactivity Training
  • 9. The plan Introductions • • About Users • Break • Stereotypes and Things You Should Know • Break • Interactivity Training • Celebrate
  • 10. Dan Mall Philly representin’ Interactive Director at Happy Cog and tech editor for A List Apart Married for 7 months Love Flash work Designer, art director, teacher, singer, coder, husband, author, speaker, wrestler, son, writer, blogger, brother... Sunkist addict
  • 11. You?
  • 12. What do users want?
  • 13. Users want to love.
  • 17. Our emotions change the way we think, and serve as constant guides to appropriate behavior, steering us away from the bad, guiding us towards the good. —Don Norman, Emotional Design
  • 18. What do users expect?
  • 24. Users want to know what’s going on.
  • 28. TYPOGRAPHY What makes readers respond Inherently interesting content •
  • 29. TYPOGRAPHY What makes readers respond Inherently interesting content • Multilevel readership that encourages scanning •
  • 30. TYPOGRAPHY What makes readers respond Inherently interesting content • Multilevel readership that encourages scanning • Headlines that make me want to know more •
  • 31. TYPOGRAPHY What makes readers respond Inherently interesting content • Multilevel readership that encourages scanning • Headlines that make me want to know more • Subheads that complete the story •
  • 32. TYPOGRAPHY What makes readers respond Inherently interesting content • Multilevel readership that encourages scanning • Headlines that make me want to know more • Subheads that complete the story • Intriguing captions •
  • 33. TYPOGRAPHY What makes readers respond Inherently interesting content • Multilevel readership that encourages scanning • Headlines that make me want to know more • Subheads that complete the story • Intriguing captions • Well-built text •
  • 34. TYPOGRAPHY What makes readers respond Inherently interesting content • Multilevel readership that encourages scanning • Headlines that make me want to know more • Subheads that complete the story • Intriguing captions • Well-built text • —Alex White, Thinking in Type
  • 40. LAYOUT AND GRID The purpose of a grid “Information presented with clear and logically set out titles, subtitles, texts, illustrations, and captions will not only be read more quickly and easily but the information will also be better understood and retained in memory. This is a scientifically proved fact and the designer should bear it in mind constantly.” —Josef Müller-Brockman, Grid systems in graphic design
  • 44. NEGATIVE SPACE Grouping and order “Shape and composition have a direct impact on viewer perception. When elements are not grouped and each is surrounded by white space, the surrounding spaces are many and the composition appears chaotic and unorganized. As elements are grouped, the white spaces become fewer and larger, and a simplified more cohesive perception of the composition is created.” —Kimberly Elam, Grid Systems
  • 46. MOVEMENT Movement is very attractive, so it should be used carefully “Movement should help you understand the interrelatedness or sequence of information you’re presenting. The audience should be able to process the information in the order that the movement presents it.” —Nancy Duarte, slide:ology • Movement softens transitions • No snapping • “Something is happening” vs. “Something happened”
  • 48. ANIMATION Animation should be natural and alive “The word animation is derived from the Latin word anima, which loosely means ‘the breath of life.’ Most presentation animation sucks the life out of the audience instead of breathing life into it. —Nancy Duarte, slide:ology “Control timing to capture the audience. Timing conveys a character’s thought process and emotions, and strengthens story points.” —John Lasseter, Timing for Animation
  • 51. HTML A structural markup language “All web pages are written with HTML. [It] lets you format text, add graphics, sound, and video... [It] has 2 essential features—hypertext and universality. Hypertext means you can create a link in a Web page or to practically anything else on the Internet. Universality means that virtually any computer can read a Web page. The Web is open to all.” —Elizabeth Castro, HTML 4 for the World Wide Web
  • 52. CSS A presentational language, used for styling “With CSS, it became possible to control how a page looked externally and to separate the presentational aspect of a document from its content. Presentational tags could be ditched, and layout could be controlled using CSS instead of tables. Markup could be made simple again, and people began to develop a newfound interest in underlying code.” —Andy Budd, Cameron Moll & Simon Collison, CSS Mastery
  • 53. JAVASCRIPT A behavioral language that controls interaction “JavaScript is used to add dynamic behavior to your website. The things that happen when you interact with the page—by clicking a button, dragging an image, or moving the mouse—are defined in JavaScript. It works with the Document Object Model to attach actions to different events (mouseovers, drags, and clicks).” —Stuart Langridge, DHTML Utopia: Modern Web Design Using JavaScript & DOM
  • 54. FLASH A feature-rich application with a long history “Flash has a powerful programming language, a bucket full of filter and blending tools, and cross-product integration with tools like Illustrator, Photoshop, and Flex to help you make great animation, applications, or motion design. It’s an incredible tool for expressing your creativity, style, and unique ideas.” —Jen deHaan, How to Cheat in Adobe Flash CS3
  • 55. AJAX Desktop-like experience on the web Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates: —Jesse James-Garrett, Ajax: A New Approach to Web Applications
  • 56. AJAX Desktop-like experience on the web Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates: standards-based presentation using XHTML and CSS; • —Jesse James-Garrett, Ajax: A New Approach to Web Applications
  • 57. AJAX Desktop-like experience on the web Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates: standards-based presentation using XHTML and CSS; • dynamic display and interaction using the Document Object Model; • —Jesse James-Garrett, Ajax: A New Approach to Web Applications
  • 58. AJAX Desktop-like experience on the web Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates: standards-based presentation using XHTML and CSS; • dynamic display and interaction using the Document Object Model; • data interchange and manipulation using XML and XSLT; • —Jesse James-Garrett, Ajax: A New Approach to Web Applications
  • 59. AJAX Desktop-like experience on the web Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates: standards-based presentation using XHTML and CSS; • dynamic display and interaction using the Document Object Model; • data interchange and manipulation using XML and XSLT; • asynchronous data retrieval using XMLHttpRequest; • —Jesse James-Garrett, Ajax: A New Approach to Web Applications
  • 60. AJAX Desktop-like experience on the web Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates: standards-based presentation using XHTML and CSS; • dynamic display and interaction using the Document Object Model; • data interchange and manipulation using XML and XSLT; • asynchronous data retrieval using XMLHttpRequest; • and JavaScript binding everything together. • —Jesse James-Garrett, Ajax: A New Approach to Web Applications
  • 61. WEB STANDARDS Separation of content, style, and behavior “Web standards are the tools with which all of us can design and build sophisticated, beautiful sites that will work as well tomorrow as they do today.” —Jeffrey Zeldman, Designing With Web Standards
  • 62. PROGRESSIVE ENHANCEMENT Web design strategy that focuses on content “Begin with the basic version, then add enhancements for those who can handle them.” —http://accessites.org/site/2007/02/graceful-degradation-progressive- enhancement/2/ • http://www.alistapart.com/articles/understandingprogressiveenhancement • http://www.hesketh.com/publications/inclusive_web_design_for_the_future/ • http://en.wikipedia.org/wiki/Progressive_enhancement
  • 66. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  • 67. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  • 68. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  • 69. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  • 70. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  • 72. John Coltrane’s ‘A Love Supreme’ is on sale at iTunes for $7.99. John Coltrane’s ‘A Love Supreme’ is on sale at iTunes for $7.99. John Coltrane’s ‘A Love Supreme’ is on sale at iTunes for $7.99. John Coltrane’s ‘A Love Supreme’ is on sale at iTunes for $7.99. John Coltrane’s ‘A Love Supreme’ is on sale at iTunes for $7.99. John Coltrane’s ‘A Love Supreme’ is on sale at iTunes for $7.99. John Coltrane’s ‘A Love Supreme’ is on sale at iTunes for $7.99.
  • 73. SOME THINGS TO REMEMBER
  • 74. CONSISTENCY Users demand it. There’s no way around that.
  • 80. APPROPRIATENESS Effects should exist for a very specific reason.
  • 83. HTML?
  • 85. HTML? Yes. As long as it’s web content.
  • 86. CSS?
  • 87. CSS? Maybe, depending on the average user agents for the intended audience.
  • 88. CSS? Maybe, depending on the average user agents for the intended audience. Most of the time, you’ll want to use this.
  • 90. JAVASCRIPT? Only if you’re looking to modify the existing page structure.
  • 92. JAVASCRIPT vs. AJAX JavaScript is a client-side scripting language that allows you to manipulate the structure of the page.
  • 93. JAVASCRIPT vs. AJAX JavaScript is a client-side scripting language that allows you to manipulate the structure of the page. Ajax uses JavaScript to edit the structure of the page, without being constrained to the data already loaded.
  • 94. JAVASCRIPT vs. AJAX AJAX OR NO AJAX? JavaScript is a client-side scripting language that allows you to manipulate the structure of the page. Ajax uses JavaScript to edit the structure of the page, without being constrained to the data already loaded.
  • 97. AJAX vs. FLASH JAVASCRIPT OR FLASH? JavaScript is good for manipulating structure.
  • 98. AJAX vs. FLASH JAVASCRIPT OR FLASH? JavaScript is good for manipulating structure. Flash is good for enhancing structure.
  • 99. AJAX vs. FLASH JAVASCRIPT OR FLASH? JAVASCRIPT + FLASH
  • 100. AJAX vs. FLASH JAVASCRIPT OR FLASH? JAVASCRIPT + FLASH • SWFObject
  • 101. AJAX vs. FLASH JAVASCRIPT OR FLASH? JAVASCRIPT + FLASH • SWFObject • Variables
  • 102. AJAX vs. FLASH JAVASCRIPT OR FLASH? JAVASCRIPT + FLASH • SWFObject • Variables • Dynamic data, driven by HTML
  • 103. IS THIS JUST A CRASH COURSE OF EVERYTHING WE ALREADY KNOW?
  • 107. “It took 34 years for me to draw that logo in 4 seconds.” —Paula Scher
  • 108. Use real life as your guide.
  • 110. SOME GUIDELINES Tips for Brainstorming
  • 111. SOME GUIDELINES Tips for Brainstorming Every idea is good •
  • 112. SOME GUIDELINES Tips for Brainstorming Every idea is good • • What if...?
  • 113. SOME GUIDELINES Tips for Brainstorming Every idea is good • • What if...? • Techniques, not technology
  • 115. THE BRIEF Catering to a specific user Imagine that Carsonified approached your team to design next year’s Future of Web Design site.