SlideShare a Scribd company logo
1 of 67
Download to read offline
User Experience is dead.
Long live the user experience!
Greg Bell | Orange Peel Media
The King is dead.
Long live the King!
The Web   The NEW   The Software
 World      Web        World
30 Best Careers of 2009 (USNews.com):
Usability Experience Specialist
http://www.usnews.com/articles/business/best-careers/2008/12/11/the-report-card.html
“   This profession has a hard time agreeing on a name for itself.
    It's called, for example, user experience specialist, interface
    designer, information architect, usability practitioner, user-
    centered design specialist, and usability manager. Whatever



                                                                ”
    you call them, their job is to help ensure that products,
    especially technical ones, are easy and pleasurable to use.
Site Maps &
Wireframes
Site Maps &
Wireframes    Visual Design
Site Maps &
Wireframes    Visual Design   HTML & CSS
                              <?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?>
                              <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.1//ENquot;
                                quot;http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtdquot;>

                              <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xml:lang=quot;enquot;>
                              <head>

                                <script src=quot;/javascripts/jquery-
                              1.2.6.min.js?1231171274quot; type=quot;text/javascriptquot;></script>
                                <link
                              href=quot;/stylesheets/citrus_modules/admin.css?1232396021quot;
                              media=quot;screenquot; rel=quot;stylesheetquot; type=quot;text/cssquot; />
                                <title>Admin Site</title>
                              </head>

                              <body class=quot;citrus_adminquot;>
                                <div id=quot;headerquot;>
                                   <h1><a href=quot;/adminquot;>Woop Woop Admin Site</a></h1>
                                         <div id=quot;utility_navquot;>
                                      <p>
                                         Welcome back gregbell. (<a
                              href=quot;/logoutquot;>logout</a>)
                                      </p>
                                   </div><!-- end utility_nav -->

                                   <ul id=quot;citrus_admin_tabsquot;><li><a href=quot;/adminquot;
                              class=quot;quot;>Dashboard</a></li><li><a href=quot;/admin/postsquot;
                              class=quot;quot;>Blogs</a></li><li><a href=quot;/admin/pagesquot;
                              class=quot;quot;>Pages</a></li><li><a href=quot;/admin/smsquot;
                              class=quot;quot;>SMS</a></li><li><a href=quot;/admin/usersquot;
                              class=quot;currentquot;>Users</a></li></ul><!-- end
                              citrus_admin_tabs -->

                                </div><!-- end header -->
                                <div id=quot;contentquot;>
                                   <div id=quot;main_contentquot;>
                                      <h2>Users</h2>
Site Maps &
Wireframes    Visual Design   HTML & CSS                                                  Back-end Dev
                              <?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?>                       class Screenshot < ActiveRecord::Base
                              <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.1//ENquot;
                                quot;http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtdquot;>             include ActionController::Routing

                              <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xml:lang=quot;enquot;>      # Associations
                              <head>                                                         belongs_to :user
                                                                                             has_many :comments, :dependent => :destroy
                                <script src=quot;/javascripts/jquery-                            has_many :favorites, :dependent => :destroy
                              1.2.6.min.js?1231171274quot; type=quot;text/javascriptquot;></script>      has_many :activities, :as => :record, :dependent =>
                                <link                                                      :destroy
                              href=quot;/stylesheets/citrus_modules/admin.css?1232396021quot;        has_many :daily_views_reports, :class_name =>
                              media=quot;screenquot; rel=quot;stylesheetquot; type=quot;text/cssquot; />           'ScreenshotDailyViewsReport',:dependent => :destroy
                                <title>Admin Site</title>
                              </head>                                                       # Acts_as...
                                                                                            acts_as_taggable
                              <body class=quot;citrus_adminquot;>
                                <div id=quot;headerquot;>                                           # This isn't allowed to be set by mass assigment
                                   <h1><a href=quot;/adminquot;>Woop Woop Admin Site</a></h1>       attr_protected :flagged
                                         <div id=quot;utility_navquot;>
                                      <p>                                                    # Validations
                                         Welcome back gregbell. (<a                          before_validation :remove_bad_characters_from_tag_list
                              href=quot;/logoutquot;>logout</a>)                                     after_validation_on_create
                                      </p>                                                 :parse_and_create_human_readable_error_messages_for_upload
                                   </div><!-- end utility_nav -->                          _field
                                                                                             before_create :set_safe_filename
                                   <ul id=quot;citrus_admin_tabsquot;><li><a href=quot;/adminquot;           before_save :parse_source_url
                              class=quot;quot;>Dashboard</a></li><li><a href=quot;/admin/postsquot;          after_create :log_activity
                              class=quot;quot;>Blogs</a></li><li><a href=quot;/admin/pagesquot;
                              class=quot;quot;>Pages</a></li><li><a href=quot;/admin/smsquot;                # Attachment_Fu
                              class=quot;quot;>SMS</a></li><li><a href=quot;/admin/usersquot;                has_attachment :content_type => :image,
                              class=quot;currentquot;>Users</a></li></ul><!-- end                                    :storage => :s3,
                              citrus_admin_tabs -->                                                          :max_size => 5.megabytes,
                                                                                                             :thumbnails => { :small_square =>
                                </div><!-- end header -->                                  '100x100!', :med_rect => '215x150!', :large => '680>' },
                                <div id=quot;contentquot;>                                                           :processor => :MiniMagick
                                   <div id=quot;main_contentquot;>
                                      <h2>Users</h2>                                        validates_as_attachment
Site Maps &
Wireframes    Visual Design   HTML & CSS                                                  Back-end Dev                                                  Web Experience
                              <?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?>                       class Screenshot < ActiveRecord::Base
                              <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.1//ENquot;
                                quot;http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtdquot;>              include ActionController::Routing

                              <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xml:lang=quot;enquot;>      # Associations
                              <head>                                                         belongs_to :user
                                                                                             has_many :comments, :dependent => :destroy
                                <script src=quot;/javascripts/jquery-                            has_many :favorites, :dependent => :destroy
                              1.2.6.min.js?1231171274quot; type=quot;text/javascriptquot;></script>      has_many :activities, :as => :record, :dependent =>
                                <link                                                      :destroy
                              href=quot;/stylesheets/citrus_modules/admin.css?1232396021quot;        has_many :daily_views_reports, :class_name =>
                              media=quot;screenquot; rel=quot;stylesheetquot; type=quot;text/cssquot; />           'ScreenshotDailyViewsReport',:dependent => :destroy
                                <title>Admin Site</title>
                              </head>                                                        # Acts_as...
                                                                                             acts_as_taggable
                              <body class=quot;citrus_adminquot;>
                                <div id=quot;headerquot;>                                            # This isn't allowed to be set by mass assigment
                                   <h1><a href=quot;/adminquot;>Woop Woop Admin Site</a></h1>        attr_protected :flagged
                                         <div id=quot;utility_navquot;>
                                      <p>                                                    # Validations
                                         Welcome back gregbell. (<a                          before_validation :remove_bad_characters_from_tag_list
                              href=quot;/logoutquot;>logout</a>)                                     after_validation_on_create
                                      </p>                                                 :parse_and_create_human_readable_error_messages_for_upload
                                   </div><!-- end utility_nav -->                          _field
                                                                                             before_create :set_safe_filename
                                   <ul id=quot;citrus_admin_tabsquot;><li><a href=quot;/adminquot;           before_save :parse_source_url
                              class=quot;quot;>Dashboard</a></li><li><a href=quot;/admin/postsquot;          after_create :log_activity
                              class=quot;quot;>Blogs</a></li><li><a href=quot;/admin/pagesquot;
                              class=quot;quot;>Pages</a></li><li><a href=quot;/admin/smsquot;                # Attachment_Fu
                              class=quot;quot;>SMS</a></li><li><a href=quot;/admin/usersquot;                has_attachment :content_type => :image,
                              class=quot;currentquot;>Users</a></li></ul><!-- end                                    :storage => :s3,
                              citrus_admin_tabs -->                                                          :max_size => 5.megabytes,
                                                                                                             :thumbnails => { :small_square =>
                                </div><!-- end header -->                                  '100x100!', :med_rect => '215x150!', :large => '680>' },
                                <div id=quot;contentquot;>                                                           :processor => :MiniMagick
                                   <div id=quot;main_contentquot;>
                                      <h2>Users</h2>                                         validates_as_attachment
Site Maps &
Requirements   Wireframes    Visual Design   HTML & CSS                                                  Back-end Dev                                                  Web Experience
                                             <?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?>                       class Screenshot < ActiveRecord::Base
                                             <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.1//ENquot;
                                               quot;http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtdquot;>              include ActionController::Routing

 1.                                          <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xml:lang=quot;enquot;>
                                             <head>
                                                                                                            # Associations
                                                                                                            belongs_to :user
                                                                                                            has_many :comments, :dependent => :destroy
                                               <script src=quot;/javascripts/jquery-                            has_many :favorites, :dependent => :destroy
                                             1.2.6.min.js?1231171274quot; type=quot;text/javascriptquot;></script>      has_many :activities, :as => :record, :dependent =>
                                               <link                                                      :destroy
 2.                                          href=quot;/stylesheets/citrus_modules/admin.css?1232396021quot;
                                             media=quot;screenquot; rel=quot;stylesheetquot; type=quot;text/cssquot; />
                                                                                                            has_many :daily_views_reports, :class_name =>
                                                                                                          'ScreenshotDailyViewsReport',:dependent => :destroy
                                               <title>Admin Site</title>
                                             </head>                                                        # Acts_as...
                                                                                                            acts_as_taggable
                                             <body class=quot;citrus_adminquot;>

 3.                                            <div id=quot;headerquot;>
                                                  <h1><a href=quot;/adminquot;>Woop Woop Admin Site</a></h1>
                                                        <div id=quot;utility_navquot;>
                                                                                                            # This isn't allowed to be set by mass assigment
                                                                                                            attr_protected :flagged

                                                     <p>                                                    # Validations
                                                        Welcome back gregbell. (<a                          before_validation :remove_bad_characters_from_tag_list
                                             href=quot;/logoutquot;>logout</a>)                                     after_validation_on_create
                                                     </p>                                                 :parse_and_create_human_readable_error_messages_for_upload
 4.                                               </div><!-- end utility_nav -->                          _field
                                                                                                            before_create :set_safe_filename
                                                  <ul id=quot;citrus_admin_tabsquot;><li><a href=quot;/adminquot;           before_save :parse_source_url
                                             class=quot;quot;>Dashboard</a></li><li><a href=quot;/admin/postsquot;          after_create :log_activity
                                             class=quot;quot;>Blogs</a></li><li><a href=quot;/admin/pagesquot;
                                             class=quot;quot;>Pages</a></li><li><a href=quot;/admin/smsquot;                # Attachment_Fu

 5.                                          class=quot;quot;>SMS</a></li><li><a href=quot;/admin/usersquot;
                                             class=quot;currentquot;>Users</a></li></ul><!-- end
                                             citrus_admin_tabs -->
                                                                                                            has_attachment :content_type => :image,
                                                                                                                            :storage => :s3,
                                                                                                                            :max_size => 5.megabytes,
                                                                                                                            :thumbnails => { :small_square =>
                                               </div><!-- end header -->                                  '100x100!', :med_rect => '215x150!', :large => '680>' },
                                               <div id=quot;contentquot;>                                                           :processor => :MiniMagick
                                                  <div id=quot;main_contentquot;>
                                                     <h2>Users</h2>                                         validates_as_attachment
Business Process                  Site Maps &
  & Planning       Requirements   Wireframes    Visual Design   HTML & CSS                                                  Back-end Dev                                                  Web Experience
                                                                <?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?>                       class Screenshot < ActiveRecord::Base
                                                                <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.1//ENquot;
                                                                  quot;http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtdquot;>              include ActionController::Routing
        8
        7
                    1.                                          <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xml:lang=quot;enquot;>
                                                                <head>
                                                                                                                               # Associations
                                                                                                                               belongs_to :user
        6                                                                                                                      has_many :comments, :dependent => :destroy
        5                                                         <script src=quot;/javascripts/jquery-                            has_many :favorites, :dependent => :destroy
                                                                1.2.6.min.js?1231171274quot; type=quot;text/javascriptquot;></script>      has_many :activities, :as => :record, :dependent =>
        4                                                         <link                                                      :destroy
        3
        2
                    2.                                          href=quot;/stylesheets/citrus_modules/admin.css?1232396021quot;
                                                                media=quot;screenquot; rel=quot;stylesheetquot; type=quot;text/cssquot; />
                                                                                                                               has_many :daily_views_reports, :class_name =>
                                                                                                                             'ScreenshotDailyViewsReport',:dependent => :destroy
                                                                  <title>Admin Site</title>
        1                                                       </head>                                                        # Acts_as...
        0                                                                                                                      acts_as_taggable
                                                                <body class=quot;citrus_adminquot;>

   1.               3.                                            <div id=quot;headerquot;>
                                                                     <h1><a href=quot;/adminquot;>Woop Woop Admin Site</a></h1>
                                                                           <div id=quot;utility_navquot;>
                                                                                                                               # This isn't allowed to be set by mass assigment
                                                                                                                               attr_protected :flagged

                                                                        <p>                                                    # Validations
                                                                           Welcome back gregbell. (<a                          before_validation :remove_bad_characters_from_tag_list
                                                                href=quot;/logoutquot;>logout</a>)                                     after_validation_on_create
                                                                        </p>                                                 :parse_and_create_human_readable_error_messages_for_upload
   2.               4.                                               </div><!-- end utility_nav -->                          _field
                                                                                                                               before_create :set_safe_filename
                                                                     <ul id=quot;citrus_admin_tabsquot;><li><a href=quot;/adminquot;           before_save :parse_source_url
                                                                class=quot;quot;>Dashboard</a></li><li><a href=quot;/admin/postsquot;          after_create :log_activity
                                                                class=quot;quot;>Blogs</a></li><li><a href=quot;/admin/pagesquot;
                                                                class=quot;quot;>Pages</a></li><li><a href=quot;/admin/smsquot;                # Attachment_Fu

   3.               5.                                          class=quot;quot;>SMS</a></li><li><a href=quot;/admin/usersquot;
                                                                class=quot;currentquot;>Users</a></li></ul><!-- end
                                                                citrus_admin_tabs -->
                                                                                                                               has_attachment :content_type => :image,
                                                                                                                                               :storage => :s3,
                                                                                                                                               :max_size => 5.megabytes,
                                                                                                                                               :thumbnails => { :small_square =>
                                                                  </div><!-- end header -->                                  '100x100!', :med_rect => '215x150!', :large => '680>' },
                                                                  <div id=quot;contentquot;>                                                           :processor => :MiniMagick
                                                                     <div id=quot;main_contentquot;>
                                                                        <h2>Users</h2>                                         validates_as_attachment
Business Process                  Site Maps &
Business     & Planning       Requirements   Wireframes    Visual Design   HTML & CSS                                                  Back-end Dev                                                  Web Experience
                                                                           <?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?>                       class Screenshot < ActiveRecord::Base
                                                                           <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.1//ENquot;
                                                                             quot;http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtdquot;>              include ActionController::Routing
                   8
                   7
                               1.                                          <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xml:lang=quot;enquot;>
                                                                           <head>
                                                                                                                                          # Associations
                                                                                                                                          belongs_to :user
                   6                                                                                                                      has_many :comments, :dependent => :destroy
                   5                                                         <script src=quot;/javascripts/jquery-                            has_many :favorites, :dependent => :destroy
                                                                           1.2.6.min.js?1231171274quot; type=quot;text/javascriptquot;></script>      has_many :activities, :as => :record, :dependent =>
                   4                                                         <link                                                      :destroy
                   3
                   2
                               2.                                          href=quot;/stylesheets/citrus_modules/admin.css?1232396021quot;
                                                                           media=quot;screenquot; rel=quot;stylesheetquot; type=quot;text/cssquot; />
                                                                                                                                          has_many :daily_views_reports, :class_name =>
                                                                                                                                        'ScreenshotDailyViewsReport',:dependent => :destroy
                                                                             <title>Admin Site</title>
                   1                                                       </head>                                                        # Acts_as...
                   0                                                                                                                      acts_as_taggable
                                                                           <body class=quot;citrus_adminquot;>

              1.               3.                                            <div id=quot;headerquot;>
                                                                                <h1><a href=quot;/adminquot;>Woop Woop Admin Site</a></h1>
                                                                                      <div id=quot;utility_navquot;>
                                                                                                                                          # This isn't allowed to be set by mass assigment
                                                                                                                                          attr_protected :flagged

                                                                                   <p>                                                    # Validations
                                                                                      Welcome back gregbell. (<a                          before_validation :remove_bad_characters_from_tag_list
                                                                           href=quot;/logoutquot;>logout</a>)                                     after_validation_on_create
                                                                                   </p>                                                 :parse_and_create_human_readable_error_messages_for_upload
              2.               4.                                               </div><!-- end utility_nav -->                          _field
                                                                                                                                          before_create :set_safe_filename
                                                                                <ul id=quot;citrus_admin_tabsquot;><li><a href=quot;/adminquot;           before_save :parse_source_url
                                                                           class=quot;quot;>Dashboard</a></li><li><a href=quot;/admin/postsquot;          after_create :log_activity
                                                                           class=quot;quot;>Blogs</a></li><li><a href=quot;/admin/pagesquot;
                                                                           class=quot;quot;>Pages</a></li><li><a href=quot;/admin/smsquot;                # Attachment_Fu

              3.               5.                                          class=quot;quot;>SMS</a></li><li><a href=quot;/admin/usersquot;
                                                                           class=quot;currentquot;>Users</a></li></ul><!-- end
                                                                           citrus_admin_tabs -->
                                                                                                                                          has_attachment :content_type => :image,
                                                                                                                                                          :storage => :s3,
                                                                                                                                                          :max_size => 5.megabytes,
                                                                                                                                                          :thumbnails => { :small_square =>
                                                                             </div><!-- end header -->                                  '100x100!', :med_rect => '215x150!', :large => '680>' },
                                                                             <div id=quot;contentquot;>                                                           :processor => :MiniMagick
                                                                                <div id=quot;main_contentquot;>
                                                                                   <h2>Users</h2>                                         validates_as_attachment
k-end Dev                                         Web Experience
nshot < ActiveRecord::Base

ctionController::Routing

tions
o :user
:comments, :dependent => :destroy
:favorites, :dependent => :destroy
:activities, :as => :record, :dependent =>

:daily_views_reports, :class_name =>
DailyViewsReport',:dependent => :destroy

...
aggable

n't allowed to be set by mass assigment
ected :flagged

ions
lidation :remove_bad_characters_from_tag_list
idation_on_create
create_human_readable_error_messages_for_upload

eate :set_safe_filename
ve :parse_source_url
ate :log_activity

ent_Fu
hment :content_type => :image,
       :storage => :s3,
       :max_size => 5.megabytes,
       :thumbnails => { :small_square =>
 :med_rect => '215x150!', :large => '680>' },
       :processor => :MiniMagick

_as_attachment
http://www.flickr.com/photos/b-tal/2712658213/
ScrnShots   Share your inspiration.
http://flickr.com/photos/jvk/6721198/
iphoto, folders, flickr, skitch...
             etc..
What I wanted from my screenshots:
✔ Quickly take and share
✔ Community to share with and learn from
✔ Follow friends who take good screenshots
✔ Easily look up screenshots for inspiration
So... we built it!
6
lessons
learned
Lesson 1 of 6:

You can’t do everything.
3 Phases for ScrnShots:
Creation         Organization   Collaboration
“   Good Software takes 10 years.
    Get used to it
                                                            ”
    http://www.joelonsoftware.com/articles/fog0000000017.html
Major Web Application Launch Dates



 1996      1998        2001       2002       2003        2004
Hotmail   Netflix    Wikipedia   Last.fm   Wordpress     Flickr
                                           MySpace     Basecamp
                                                         Gmail
                                                       Facebook
3 Phases for ScrnShots:
Creation         Organization   Collaboration
3 Phases for ScrnShots:
Creation         Organization   Collaboration
Lesson 2 of 6:

Marketing is the entry point
to the user experience.
Launch & Marketing == Lots of Time
Lesson 3 of 6:

Iterative design & development
is the only way to work.
High Level Planning
  & Requirements
High Level Planning
  & Requirements




      Requirements,
        Design &
      Development
        Iterations
Perfection is the
enemy of progress.
big
small improvements
make

             differences
Lesson 4 of 6:

The feedback loop is smaller
than ever. Take advantage.
Lesson 5 of 6:

Automate Automate Automate
Lesson 6 of 6:

Think systems design.
“   Systems thinking is a framework that is based on
    the belief that the component parts of a system
    can best be understood in the context of
    relationships with each other and with other
    systems, rather than in isolation.
    http://en.wikipedia.org/wiki/Systems_thinking
                                                    ”
User Experience thinking
must include Systems Thinking
User Experience is dead.
Long live the user experience!
Thanks!

More Related Content

What's hot

Desenvolvimento web com Ruby on Rails (parte 2)
Desenvolvimento web com Ruby on Rails (parte 2)Desenvolvimento web com Ruby on Rails (parte 2)
Desenvolvimento web com Ruby on Rails (parte 2)Joao Lucas Santana
 
Findability Bliss Through Web Standards
Findability Bliss Through Web StandardsFindability Bliss Through Web Standards
Findability Bliss Through Web StandardsAarron Walter
 
[PyConZA 2017] Web Scraping: Unleash your Internet Viking
[PyConZA 2017] Web Scraping: Unleash your Internet Viking[PyConZA 2017] Web Scraping: Unleash your Internet Viking
[PyConZA 2017] Web Scraping: Unleash your Internet VikingAndrew Collier
 
Developing and testing ajax components
Developing and testing ajax componentsDeveloping and testing ajax components
Developing and testing ajax componentsIgnacio Coloma
 
I pv6+at+caribbean+sector
I pv6+at+caribbean+sectorI pv6+at+caribbean+sector
I pv6+at+caribbean+sectormax Firmin
 
Makanan halal-haram-2970785
Makanan halal-haram-2970785Makanan halal-haram-2970785
Makanan halal-haram-2970785khairulamar
 
Introduction to Ruby on Rails
Introduction to Ruby on RailsIntroduction to Ruby on Rails
Introduction to Ruby on RailsDiki Andeas
 
El Tiempo Nos Ensea 214392
El Tiempo Nos Ensea 214392El Tiempo Nos Ensea 214392
El Tiempo Nos Ensea 214392guestc65f09
 
Los Estados De La Materia
Los Estados De La MateriaLos Estados De La Materia
Los Estados De La MateriaMayritalinda
 
Beautiful Java EE - PrettyFaces
Beautiful Java EE - PrettyFacesBeautiful Java EE - PrettyFaces
Beautiful Java EE - PrettyFacesLincoln III
 
An introduction to juice
An introduction to juice An introduction to juice
An introduction to juice juiceproject
 
What's new in Rails 2?
What's new in Rails 2?What's new in Rails 2?
What's new in Rails 2?brynary
 
Your Custom WordPress Admin Pages Suck
Your Custom WordPress Admin Pages SuckYour Custom WordPress Admin Pages Suck
Your Custom WordPress Admin Pages SuckAnthony Montalbano
 
IBM Lotus Notes Domino XPages and XPages for Mobile
IBM Lotus Notes Domino XPages and XPages for MobileIBM Lotus Notes Domino XPages and XPages for Mobile
IBM Lotus Notes Domino XPages and XPages for MobileChris Toohey
 
Optimizing Drupal for Mobile Devices
Optimizing Drupal for Mobile DevicesOptimizing Drupal for Mobile Devices
Optimizing Drupal for Mobile DevicesSugree Phatanapherom
 

What's hot (20)

Front End on Rails
Front End on RailsFront End on Rails
Front End on Rails
 
Desenvolvimento web com Ruby on Rails (parte 2)
Desenvolvimento web com Ruby on Rails (parte 2)Desenvolvimento web com Ruby on Rails (parte 2)
Desenvolvimento web com Ruby on Rails (parte 2)
 
Test upload
Test uploadTest upload
Test upload
 
Findability Bliss Through Web Standards
Findability Bliss Through Web StandardsFindability Bliss Through Web Standards
Findability Bliss Through Web Standards
 
[PyConZA 2017] Web Scraping: Unleash your Internet Viking
[PyConZA 2017] Web Scraping: Unleash your Internet Viking[PyConZA 2017] Web Scraping: Unleash your Internet Viking
[PyConZA 2017] Web Scraping: Unleash your Internet Viking
 
Developing and testing ajax components
Developing and testing ajax componentsDeveloping and testing ajax components
Developing and testing ajax components
 
I pv6+at+caribbean+sector
I pv6+at+caribbean+sectorI pv6+at+caribbean+sector
I pv6+at+caribbean+sector
 
Makanan halal-haram-2970785
Makanan halal-haram-2970785Makanan halal-haram-2970785
Makanan halal-haram-2970785
 
Introduction to Ruby on Rails
Introduction to Ruby on RailsIntroduction to Ruby on Rails
Introduction to Ruby on Rails
 
El Tiempo Nos Ensea 214392
El Tiempo Nos Ensea 214392El Tiempo Nos Ensea 214392
El Tiempo Nos Ensea 214392
 
Los Estados De La Materia
Los Estados De La MateriaLos Estados De La Materia
Los Estados De La Materia
 
Eclampsia 4-real-presentation
Eclampsia 4-real-presentationEclampsia 4-real-presentation
Eclampsia 4-real-presentation
 
Beautiful Java EE - PrettyFaces
Beautiful Java EE - PrettyFacesBeautiful Java EE - PrettyFaces
Beautiful Java EE - PrettyFaces
 
An introduction to juice
An introduction to juice An introduction to juice
An introduction to juice
 
What's new in Rails 2?
What's new in Rails 2?What's new in Rails 2?
What's new in Rails 2?
 
Your Custom WordPress Admin Pages Suck
Your Custom WordPress Admin Pages SuckYour Custom WordPress Admin Pages Suck
Your Custom WordPress Admin Pages Suck
 
Upload[1]
Upload[1]Upload[1]
Upload[1]
 
Ajax
AjaxAjax
Ajax
 
IBM Lotus Notes Domino XPages and XPages for Mobile
IBM Lotus Notes Domino XPages and XPages for MobileIBM Lotus Notes Domino XPages and XPages for Mobile
IBM Lotus Notes Domino XPages and XPages for Mobile
 
Optimizing Drupal for Mobile Devices
Optimizing Drupal for Mobile DevicesOptimizing Drupal for Mobile Devices
Optimizing Drupal for Mobile Devices
 

Viewers also liked

IEL - Satya's 2nd Class
IEL - Satya's 2nd ClassIEL - Satya's 2nd Class
IEL - Satya's 2nd ClassHarish Lunani
 
Practical outsourcing getting_work_done_faster_cheaper_and_better_mc_queen
Practical outsourcing getting_work_done_faster_cheaper_and_better_mc_queenPractical outsourcing getting_work_done_faster_cheaper_and_better_mc_queen
Practical outsourcing getting_work_done_faster_cheaper_and_better_mc_queenQuestexConf
 
Rails 3 - RS on Rails - 21aug2010
Rails 3 - RS on Rails - 21aug2010Rails 3 - RS on Rails - 21aug2010
Rails 3 - RS on Rails - 21aug2010Plataformatec
 
Relatorio recife (times_de_futebol)_-_agosto_2010
Relatorio recife (times_de_futebol)_-_agosto_2010Relatorio recife (times_de_futebol)_-_agosto_2010
Relatorio recife (times_de_futebol)_-_agosto_2010Blog do Torcedor/JC Online
 
Super session the_social_enterprise_combining_people_processes_and_content
Super session the_social_enterprise_combining_people_processes_and_contentSuper session the_social_enterprise_combining_people_processes_and_content
Super session the_social_enterprise_combining_people_processes_and_contentQuestexConf
 
Зырянова анонс Оценка секретарей
Зырянова анонс Оценка секретарейЗырянова анонс Оценка секретарей
Зырянова анонс Оценка секретарейMoscow Business School
 
A Legacy of Light and Dark Generation 2 Chapter 1
A Legacy of Light and Dark Generation 2 Chapter 1A Legacy of Light and Dark Generation 2 Chapter 1
A Legacy of Light and Dark Generation 2 Chapter 1AuroraDay01
 
Global eyes magazine february 2011
Global eyes magazine february 2011Global eyes magazine february 2011
Global eyes magazine february 2011Beatrice Watson
 
How to get through high school
How to get  through high schoolHow to get  through high school
How to get through high schoolluckylu159
 

Viewers also liked (20)

IEL - Satya's 2nd Class
IEL - Satya's 2nd ClassIEL - Satya's 2nd Class
IEL - Satya's 2nd Class
 
Marketing to Ireland
Marketing to IrelandMarketing to Ireland
Marketing to Ireland
 
CoA fro ENOC
CoA fro ENOCCoA fro ENOC
CoA fro ENOC
 
Practical outsourcing getting_work_done_faster_cheaper_and_better_mc_queen
Practical outsourcing getting_work_done_faster_cheaper_and_better_mc_queenPractical outsourcing getting_work_done_faster_cheaper_and_better_mc_queen
Practical outsourcing getting_work_done_faster_cheaper_and_better_mc_queen
 
Rails 3 - RS on Rails - 21aug2010
Rails 3 - RS on Rails - 21aug2010Rails 3 - RS on Rails - 21aug2010
Rails 3 - RS on Rails - 21aug2010
 
Relatorio recife (times_de_futebol)_-_agosto_2010
Relatorio recife (times_de_futebol)_-_agosto_2010Relatorio recife (times_de_futebol)_-_agosto_2010
Relatorio recife (times_de_futebol)_-_agosto_2010
 
Pokemon
PokemonPokemon
Pokemon
 
Duygular
DuygularDuygular
Duygular
 
Super session the_social_enterprise_combining_people_processes_and_content
Super session the_social_enterprise_combining_people_processes_and_contentSuper session the_social_enterprise_combining_people_processes_and_content
Super session the_social_enterprise_combining_people_processes_and_content
 
Зырянова анонс Оценка секретарей
Зырянова анонс Оценка секретарейЗырянова анонс Оценка секретарей
Зырянова анонс Оценка секретарей
 
A Legacy of Light and Dark Generation 2 Chapter 1
A Legacy of Light and Dark Generation 2 Chapter 1A Legacy of Light and Dark Generation 2 Chapter 1
A Legacy of Light and Dark Generation 2 Chapter 1
 
Pesquisa brasil bola da vez deloitte e ibri
Pesquisa brasil bola da vez   deloitte e ibriPesquisa brasil bola da vez   deloitte e ibri
Pesquisa brasil bola da vez deloitte e ibri
 
3dtomsk
3dtomsk3dtomsk
3dtomsk
 
Global eyes magazine february 2011
Global eyes magazine february 2011Global eyes magazine february 2011
Global eyes magazine february 2011
 
201503170820
201503170820201503170820
201503170820
 
Genç Ressam
Genç RessamGenç Ressam
Genç Ressam
 
How to get through high school
How to get  through high schoolHow to get  through high school
How to get through high school
 
11 essencia de luz
11  essencia de luz11  essencia de luz
11 essencia de luz
 
Nafta
NaftaNafta
Nafta
 
Wordpress instruktioner
Wordpress instruktionerWordpress instruktioner
Wordpress instruktioner
 

Similar to User Experience is dead. Long live the user experience!

Similar to User Experience is dead. Long live the user experience! (20)

Building Web Interface On Rails
Building Web Interface On RailsBuilding Web Interface On Rails
Building Web Interface On Rails
 
Wiidget
WiidgetWiidget
Wiidget
 
HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09
 
Ajax ons2
Ajax ons2Ajax ons2
Ajax ons2
 
Rails 3 And The Real Secret To High Productivity Presentation
Rails 3 And The Real Secret To High Productivity PresentationRails 3 And The Real Secret To High Productivity Presentation
Rails 3 And The Real Secret To High Productivity Presentation
 
HTML5 Overview
HTML5 OverviewHTML5 Overview
HTML5 Overview
 
Doctype htmlcodigioooooo
Doctype htmlcodigiooooooDoctype htmlcodigioooooo
Doctype htmlcodigioooooo
 
A rel
A relA rel
A rel
 
merb.intro
merb.intromerb.intro
merb.intro
 
Using Forms in Share
Using Forms in ShareUsing Forms in Share
Using Forms in Share
 
Licencias
LicenciasLicencias
Licencias
 
Licencias
LicenciasLicencias
Licencias
 
GTAC: AtomPub, testing your server implementation
GTAC: AtomPub, testing your server implementationGTAC: AtomPub, testing your server implementation
GTAC: AtomPub, testing your server implementation
 
Html5
Html5Html5
Html5
 
Introducing YUI
Introducing YUIIntroducing YUI
Introducing YUI
 
What I brought back from Austin
What I brought back from AustinWhat I brought back from Austin
What I brought back from Austin
 
HTML5: 5 Quick Wins
HTML5:  5 Quick WinsHTML5:  5 Quick Wins
HTML5: 5 Quick Wins
 
Developing Gadgets
Developing GadgetsDeveloping Gadgets
Developing Gadgets
 
Haml, Sass & Compass
Haml, Sass & CompassHaml, Sass & Compass
Haml, Sass & Compass
 
Seam Glassfish Slidecast
Seam Glassfish SlidecastSeam Glassfish Slidecast
Seam Glassfish Slidecast
 

Recently uploaded

From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clashcharlottematthew16
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostZilliz
 
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfHyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfPrecisely
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piececharlottematthew16
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfRankYa
 

Recently uploaded (20)

From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
 
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfHyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piece
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
 

User Experience is dead. Long live the user experience!

  • 1. User Experience is dead. Long live the user experience! Greg Bell | Orange Peel Media
  • 2. The King is dead. Long live the King!
  • 3. The Web The NEW The Software World Web World
  • 4. 30 Best Careers of 2009 (USNews.com): Usability Experience Specialist http://www.usnews.com/articles/business/best-careers/2008/12/11/the-report-card.html
  • 5. This profession has a hard time agreeing on a name for itself. It's called, for example, user experience specialist, interface designer, information architect, usability practitioner, user- centered design specialist, and usability manager. Whatever ” you call them, their job is to help ensure that products, especially technical ones, are easy and pleasurable to use.
  • 7. Site Maps & Wireframes Visual Design
  • 8. Site Maps & Wireframes Visual Design HTML & CSS <?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?> <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.1//ENquot; quot;http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xml:lang=quot;enquot;> <head> <script src=quot;/javascripts/jquery- 1.2.6.min.js?1231171274quot; type=quot;text/javascriptquot;></script> <link href=quot;/stylesheets/citrus_modules/admin.css?1232396021quot; media=quot;screenquot; rel=quot;stylesheetquot; type=quot;text/cssquot; /> <title>Admin Site</title> </head> <body class=quot;citrus_adminquot;> <div id=quot;headerquot;> <h1><a href=quot;/adminquot;>Woop Woop Admin Site</a></h1> <div id=quot;utility_navquot;> <p> Welcome back gregbell. (<a href=quot;/logoutquot;>logout</a>) </p> </div><!-- end utility_nav --> <ul id=quot;citrus_admin_tabsquot;><li><a href=quot;/adminquot; class=quot;quot;>Dashboard</a></li><li><a href=quot;/admin/postsquot; class=quot;quot;>Blogs</a></li><li><a href=quot;/admin/pagesquot; class=quot;quot;>Pages</a></li><li><a href=quot;/admin/smsquot; class=quot;quot;>SMS</a></li><li><a href=quot;/admin/usersquot; class=quot;currentquot;>Users</a></li></ul><!-- end citrus_admin_tabs --> </div><!-- end header --> <div id=quot;contentquot;> <div id=quot;main_contentquot;> <h2>Users</h2>
  • 9. Site Maps & Wireframes Visual Design HTML & CSS Back-end Dev <?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?> class Screenshot < ActiveRecord::Base <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.1//ENquot; quot;http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtdquot;> include ActionController::Routing <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xml:lang=quot;enquot;> # Associations <head> belongs_to :user has_many :comments, :dependent => :destroy <script src=quot;/javascripts/jquery- has_many :favorites, :dependent => :destroy 1.2.6.min.js?1231171274quot; type=quot;text/javascriptquot;></script> has_many :activities, :as => :record, :dependent => <link :destroy href=quot;/stylesheets/citrus_modules/admin.css?1232396021quot; has_many :daily_views_reports, :class_name => media=quot;screenquot; rel=quot;stylesheetquot; type=quot;text/cssquot; /> 'ScreenshotDailyViewsReport',:dependent => :destroy <title>Admin Site</title> </head> # Acts_as... acts_as_taggable <body class=quot;citrus_adminquot;> <div id=quot;headerquot;> # This isn't allowed to be set by mass assigment <h1><a href=quot;/adminquot;>Woop Woop Admin Site</a></h1> attr_protected :flagged <div id=quot;utility_navquot;> <p> # Validations Welcome back gregbell. (<a before_validation :remove_bad_characters_from_tag_list href=quot;/logoutquot;>logout</a>) after_validation_on_create </p> :parse_and_create_human_readable_error_messages_for_upload </div><!-- end utility_nav --> _field before_create :set_safe_filename <ul id=quot;citrus_admin_tabsquot;><li><a href=quot;/adminquot; before_save :parse_source_url class=quot;quot;>Dashboard</a></li><li><a href=quot;/admin/postsquot; after_create :log_activity class=quot;quot;>Blogs</a></li><li><a href=quot;/admin/pagesquot; class=quot;quot;>Pages</a></li><li><a href=quot;/admin/smsquot; # Attachment_Fu class=quot;quot;>SMS</a></li><li><a href=quot;/admin/usersquot; has_attachment :content_type => :image, class=quot;currentquot;>Users</a></li></ul><!-- end :storage => :s3, citrus_admin_tabs --> :max_size => 5.megabytes, :thumbnails => { :small_square => </div><!-- end header --> '100x100!', :med_rect => '215x150!', :large => '680>' }, <div id=quot;contentquot;> :processor => :MiniMagick <div id=quot;main_contentquot;> <h2>Users</h2> validates_as_attachment
  • 10. Site Maps & Wireframes Visual Design HTML & CSS Back-end Dev Web Experience <?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?> class Screenshot < ActiveRecord::Base <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.1//ENquot; quot;http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtdquot;> include ActionController::Routing <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xml:lang=quot;enquot;> # Associations <head> belongs_to :user has_many :comments, :dependent => :destroy <script src=quot;/javascripts/jquery- has_many :favorites, :dependent => :destroy 1.2.6.min.js?1231171274quot; type=quot;text/javascriptquot;></script> has_many :activities, :as => :record, :dependent => <link :destroy href=quot;/stylesheets/citrus_modules/admin.css?1232396021quot; has_many :daily_views_reports, :class_name => media=quot;screenquot; rel=quot;stylesheetquot; type=quot;text/cssquot; /> 'ScreenshotDailyViewsReport',:dependent => :destroy <title>Admin Site</title> </head> # Acts_as... acts_as_taggable <body class=quot;citrus_adminquot;> <div id=quot;headerquot;> # This isn't allowed to be set by mass assigment <h1><a href=quot;/adminquot;>Woop Woop Admin Site</a></h1> attr_protected :flagged <div id=quot;utility_navquot;> <p> # Validations Welcome back gregbell. (<a before_validation :remove_bad_characters_from_tag_list href=quot;/logoutquot;>logout</a>) after_validation_on_create </p> :parse_and_create_human_readable_error_messages_for_upload </div><!-- end utility_nav --> _field before_create :set_safe_filename <ul id=quot;citrus_admin_tabsquot;><li><a href=quot;/adminquot; before_save :parse_source_url class=quot;quot;>Dashboard</a></li><li><a href=quot;/admin/postsquot; after_create :log_activity class=quot;quot;>Blogs</a></li><li><a href=quot;/admin/pagesquot; class=quot;quot;>Pages</a></li><li><a href=quot;/admin/smsquot; # Attachment_Fu class=quot;quot;>SMS</a></li><li><a href=quot;/admin/usersquot; has_attachment :content_type => :image, class=quot;currentquot;>Users</a></li></ul><!-- end :storage => :s3, citrus_admin_tabs --> :max_size => 5.megabytes, :thumbnails => { :small_square => </div><!-- end header --> '100x100!', :med_rect => '215x150!', :large => '680>' }, <div id=quot;contentquot;> :processor => :MiniMagick <div id=quot;main_contentquot;> <h2>Users</h2> validates_as_attachment
  • 11. Site Maps & Requirements Wireframes Visual Design HTML & CSS Back-end Dev Web Experience <?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?> class Screenshot < ActiveRecord::Base <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.1//ENquot; quot;http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtdquot;> include ActionController::Routing 1. <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xml:lang=quot;enquot;> <head> # Associations belongs_to :user has_many :comments, :dependent => :destroy <script src=quot;/javascripts/jquery- has_many :favorites, :dependent => :destroy 1.2.6.min.js?1231171274quot; type=quot;text/javascriptquot;></script> has_many :activities, :as => :record, :dependent => <link :destroy 2. href=quot;/stylesheets/citrus_modules/admin.css?1232396021quot; media=quot;screenquot; rel=quot;stylesheetquot; type=quot;text/cssquot; /> has_many :daily_views_reports, :class_name => 'ScreenshotDailyViewsReport',:dependent => :destroy <title>Admin Site</title> </head> # Acts_as... acts_as_taggable <body class=quot;citrus_adminquot;> 3. <div id=quot;headerquot;> <h1><a href=quot;/adminquot;>Woop Woop Admin Site</a></h1> <div id=quot;utility_navquot;> # This isn't allowed to be set by mass assigment attr_protected :flagged <p> # Validations Welcome back gregbell. (<a before_validation :remove_bad_characters_from_tag_list href=quot;/logoutquot;>logout</a>) after_validation_on_create </p> :parse_and_create_human_readable_error_messages_for_upload 4. </div><!-- end utility_nav --> _field before_create :set_safe_filename <ul id=quot;citrus_admin_tabsquot;><li><a href=quot;/adminquot; before_save :parse_source_url class=quot;quot;>Dashboard</a></li><li><a href=quot;/admin/postsquot; after_create :log_activity class=quot;quot;>Blogs</a></li><li><a href=quot;/admin/pagesquot; class=quot;quot;>Pages</a></li><li><a href=quot;/admin/smsquot; # Attachment_Fu 5. class=quot;quot;>SMS</a></li><li><a href=quot;/admin/usersquot; class=quot;currentquot;>Users</a></li></ul><!-- end citrus_admin_tabs --> has_attachment :content_type => :image, :storage => :s3, :max_size => 5.megabytes, :thumbnails => { :small_square => </div><!-- end header --> '100x100!', :med_rect => '215x150!', :large => '680>' }, <div id=quot;contentquot;> :processor => :MiniMagick <div id=quot;main_contentquot;> <h2>Users</h2> validates_as_attachment
  • 12. Business Process Site Maps & & Planning Requirements Wireframes Visual Design HTML & CSS Back-end Dev Web Experience <?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?> class Screenshot < ActiveRecord::Base <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.1//ENquot; quot;http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtdquot;> include ActionController::Routing 8 7 1. <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xml:lang=quot;enquot;> <head> # Associations belongs_to :user 6 has_many :comments, :dependent => :destroy 5 <script src=quot;/javascripts/jquery- has_many :favorites, :dependent => :destroy 1.2.6.min.js?1231171274quot; type=quot;text/javascriptquot;></script> has_many :activities, :as => :record, :dependent => 4 <link :destroy 3 2 2. href=quot;/stylesheets/citrus_modules/admin.css?1232396021quot; media=quot;screenquot; rel=quot;stylesheetquot; type=quot;text/cssquot; /> has_many :daily_views_reports, :class_name => 'ScreenshotDailyViewsReport',:dependent => :destroy <title>Admin Site</title> 1 </head> # Acts_as... 0 acts_as_taggable <body class=quot;citrus_adminquot;> 1. 3. <div id=quot;headerquot;> <h1><a href=quot;/adminquot;>Woop Woop Admin Site</a></h1> <div id=quot;utility_navquot;> # This isn't allowed to be set by mass assigment attr_protected :flagged <p> # Validations Welcome back gregbell. (<a before_validation :remove_bad_characters_from_tag_list href=quot;/logoutquot;>logout</a>) after_validation_on_create </p> :parse_and_create_human_readable_error_messages_for_upload 2. 4. </div><!-- end utility_nav --> _field before_create :set_safe_filename <ul id=quot;citrus_admin_tabsquot;><li><a href=quot;/adminquot; before_save :parse_source_url class=quot;quot;>Dashboard</a></li><li><a href=quot;/admin/postsquot; after_create :log_activity class=quot;quot;>Blogs</a></li><li><a href=quot;/admin/pagesquot; class=quot;quot;>Pages</a></li><li><a href=quot;/admin/smsquot; # Attachment_Fu 3. 5. class=quot;quot;>SMS</a></li><li><a href=quot;/admin/usersquot; class=quot;currentquot;>Users</a></li></ul><!-- end citrus_admin_tabs --> has_attachment :content_type => :image, :storage => :s3, :max_size => 5.megabytes, :thumbnails => { :small_square => </div><!-- end header --> '100x100!', :med_rect => '215x150!', :large => '680>' }, <div id=quot;contentquot;> :processor => :MiniMagick <div id=quot;main_contentquot;> <h2>Users</h2> validates_as_attachment
  • 13. Business Process Site Maps & Business & Planning Requirements Wireframes Visual Design HTML & CSS Back-end Dev Web Experience <?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?> class Screenshot < ActiveRecord::Base <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.1//ENquot; quot;http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtdquot;> include ActionController::Routing 8 7 1. <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xml:lang=quot;enquot;> <head> # Associations belongs_to :user 6 has_many :comments, :dependent => :destroy 5 <script src=quot;/javascripts/jquery- has_many :favorites, :dependent => :destroy 1.2.6.min.js?1231171274quot; type=quot;text/javascriptquot;></script> has_many :activities, :as => :record, :dependent => 4 <link :destroy 3 2 2. href=quot;/stylesheets/citrus_modules/admin.css?1232396021quot; media=quot;screenquot; rel=quot;stylesheetquot; type=quot;text/cssquot; /> has_many :daily_views_reports, :class_name => 'ScreenshotDailyViewsReport',:dependent => :destroy <title>Admin Site</title> 1 </head> # Acts_as... 0 acts_as_taggable <body class=quot;citrus_adminquot;> 1. 3. <div id=quot;headerquot;> <h1><a href=quot;/adminquot;>Woop Woop Admin Site</a></h1> <div id=quot;utility_navquot;> # This isn't allowed to be set by mass assigment attr_protected :flagged <p> # Validations Welcome back gregbell. (<a before_validation :remove_bad_characters_from_tag_list href=quot;/logoutquot;>logout</a>) after_validation_on_create </p> :parse_and_create_human_readable_error_messages_for_upload 2. 4. </div><!-- end utility_nav --> _field before_create :set_safe_filename <ul id=quot;citrus_admin_tabsquot;><li><a href=quot;/adminquot; before_save :parse_source_url class=quot;quot;>Dashboard</a></li><li><a href=quot;/admin/postsquot; after_create :log_activity class=quot;quot;>Blogs</a></li><li><a href=quot;/admin/pagesquot; class=quot;quot;>Pages</a></li><li><a href=quot;/admin/smsquot; # Attachment_Fu 3. 5. class=quot;quot;>SMS</a></li><li><a href=quot;/admin/usersquot; class=quot;currentquot;>Users</a></li></ul><!-- end citrus_admin_tabs --> has_attachment :content_type => :image, :storage => :s3, :max_size => 5.megabytes, :thumbnails => { :small_square => </div><!-- end header --> '100x100!', :med_rect => '215x150!', :large => '680>' }, <div id=quot;contentquot;> :processor => :MiniMagick <div id=quot;main_contentquot;> <h2>Users</h2> validates_as_attachment
  • 14. k-end Dev Web Experience nshot < ActiveRecord::Base ctionController::Routing tions o :user :comments, :dependent => :destroy :favorites, :dependent => :destroy :activities, :as => :record, :dependent => :daily_views_reports, :class_name => DailyViewsReport',:dependent => :destroy ... aggable n't allowed to be set by mass assigment ected :flagged ions lidation :remove_bad_characters_from_tag_list idation_on_create create_human_readable_error_messages_for_upload eate :set_safe_filename ve :parse_source_url ate :log_activity ent_Fu hment :content_type => :image, :storage => :s3, :max_size => 5.megabytes, :thumbnails => { :small_square => :med_rect => '215x150!', :large => '680>' }, :processor => :MiniMagick _as_attachment
  • 16. ScrnShots Share your inspiration.
  • 17.
  • 19. iphoto, folders, flickr, skitch... etc..
  • 20. What I wanted from my screenshots: ✔ Quickly take and share ✔ Community to share with and learn from ✔ Follow friends who take good screenshots ✔ Easily look up screenshots for inspiration
  • 22.
  • 23.
  • 24.
  • 25.
  • 27. Lesson 1 of 6: You can’t do everything.
  • 28. 3 Phases for ScrnShots: Creation Organization Collaboration
  • 29.
  • 30.
  • 31. Good Software takes 10 years. Get used to it ” http://www.joelonsoftware.com/articles/fog0000000017.html
  • 32. Major Web Application Launch Dates 1996 1998 2001 2002 2003 2004 Hotmail Netflix Wikipedia Last.fm Wordpress Flickr MySpace Basecamp Gmail Facebook
  • 33. 3 Phases for ScrnShots: Creation Organization Collaboration
  • 34. 3 Phases for ScrnShots: Creation Organization Collaboration
  • 35. Lesson 2 of 6: Marketing is the entry point to the user experience.
  • 36.
  • 37. Launch & Marketing == Lots of Time
  • 38.
  • 39.
  • 40. Lesson 3 of 6: Iterative design & development is the only way to work.
  • 41.
  • 42. High Level Planning & Requirements
  • 43. High Level Planning & Requirements Requirements, Design & Development Iterations
  • 44. Perfection is the enemy of progress.
  • 45.
  • 47.
  • 48. Lesson 4 of 6: The feedback loop is smaller than ever. Take advantage.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53. Lesson 5 of 6: Automate Automate Automate
  • 54.
  • 55.
  • 56.
  • 57.
  • 58. Lesson 6 of 6: Think systems design.
  • 59. Systems thinking is a framework that is based on the belief that the component parts of a system can best be understood in the context of relationships with each other and with other systems, rather than in isolation. http://en.wikipedia.org/wiki/Systems_thinking ”
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65. User Experience thinking must include Systems Thinking
  • 66. User Experience is dead. Long live the user experience!