SlideShare una empresa de Scribd logo
1 de 32
Descargar para leer sin conexión
POINTING, SELECTING &
                                               DIRECT MANIPULATION
                                               Old models applied to new technologies…
                                               Presentation for the class: HCI Desktop to Mobile
                                               Lecturer: Dennis Krannich
                                               Place & Time: Uni Bremen, 14. Jan. 2009
                                               Presenters: Mohammad Shahin & Jan Smeddinck


http://www.io.com/~hcexres/power_tools/teams/glove_small.gif
http://www.freewebs.com/sonypsfree/nintendo_ds_lite.jpg
http://scr3.golem.de/screenshots/0807/iPhone_3G/xx_iphone3g_pair.jpg
DIRECT MANIPULATION – REDUCE COMPLEXITY




                                              14 January 2009
                                          2
DOMAIN - TERRY WINOGRAD




                                                                                                         14 January 2009
   From direct manipulation to “being there”:
       We interact with the world around us in three main
        ways; manipulation, locomotion, and conversation.
 manipulation: move things around with hands
 locomotion: move oneself from place to place

 conversation: say something and another person
  says something back




                                                                                                     3


                   http://www.stanford.edu/group/dschool/images/left/people_terry_winograd_top.jpg
ABOUT FACE 3.0: THE ESSENTIALS OF
INTERACTION DESIGN




                                                                   14 January 2009
 by Alan Cooper, Robert Reimann, Dave Cronin
 A “how-to” book
     How to design the user experience based on first
      identifying user goals and then building and utilizing
      personas to build user-centered interaction
     Not all that scientific, but useful
 First edition (1995), now: 3.0 (2007)
 Today: Chapter 19

 www.cooper.com



                                                               4
DIRECT MANIPULATION




                                               14 January 2009
               Definition:

  A human-computer interaction style
       which involves continuous
  representation of objects of interest,
    and rapid, reversible, incremental
          actions and feedback
                                           5
EXAMPLE




                                                          14 January 2009
   Showing direct manipulation in Windows Explorer




                                                      6
COINED BY SHNEIDERMAN, 1974




                                                        14 January 2009
1.   Visual representation of manipulated objects




2.   Physical actions instead of text entry




3.   Immediately visible impact of the operation    7
7 VARIETIES OF DIRECT MANIPULATION




                                                              14 January 2009
   1.         Pointing
   2.         Selection
   3.         Drag and drop
   4.         Control manipulation
   5.         Palette tools
   6.         Object manipulation
   7.         Object connection

         Program manipulation vs. content manipulation
                                                          8

http://www.allhatnocattle.net/swiss-knife.jpg
POINTING DEVICES




                                14 January 2009
 The mouse
 Alternatives:
       Light Pens / CRTs
       Trackball
       Tablets
       Touchpads
       Touchscreens




                            9
USING THE MOUSE




                                        14 January 2009
   Mouse buttons
     The left mouse button
     The right mouse button
     The middle mouse button
     The scroll wheel
     Meta-keys
   Pointing and clicking
       Pointing
       Clicking
       Clicking and dragging
       Double-clicking
       Chord-clicking
                                       10
       Double-clicking and dragging
14 January 2009
                  11
POINTING
14 January 2009
                  12
CLICKING
CLICKING & DRAGGING




                       14 January 2009
                      13
DOUBLE-CLICKING




                   14 January 2009
                  14
EVENTS: MOUSE-UP & MOUSE-DOWN




                                                     14 January 2009
 Mouse-down over an object or data should select
  the object or data
 Mouse-down over controls means propose action;
  mouse-up means commit to action.
                                                    15
POINTING AND THE CURSOR




                           14 January 2009
 Pliancy   and Hinting
   Object hinting
   Cursor hinting
   Wait cursor hinting




                          16
SELECTION




                                             14 January 2009
   The act of choosing an object or
    control is referred to as selection

   Command ordering and selection
       verb-object and object-verb order
   Discrete and contiguous selection
   Mutual exclusion
   Additive selection
   Group Selection
   Insertion and replacement
   Visual indication of selection
                                            17
PLAYTIME




                                14 January 2009
   http://www.dontclick.it/




                               18
DRAG-N-DROP




                                                            14 January 2009
 Very powerful idiom!
 Efficient: Connects 2 locations with a
  function (in 1 move)
       source -> target
 Drag to new position / window /
  function icon (trash)
 Interior vs. external
       External difficult:
           interface standards, target capabilities,
            formats, DnD data vs. functions, no standard
   Long time little use online. That
    changes…
                                                           19
       e.g. http://www.bbc.co.uk/
DRAG-N-DROP - INTERACTIONS




                                                          14 January 2009
 Forgiving interaction: Encourage users to try out DM
 Indicate drop targets
       not by cursor-hinting!
 No drop-target = no action
 Hinting at drag pliancy difficult
       Assume: Everything is dragable
 Show visual indication while dragging
 Use insertion targets, when necessary

 Indicate completion


                                                         20
DRAG-N-DROP - ISSUES




                                       14 January 2009
   Auto-scroll! (where to begin,
    how fast?)
       Not automatic scrollbar
        insertion, but automatic
        scroll-movement
   Selecting vs. dragging
       need drag-threshold after
        click
   Fine scrolling
     Exact positioning of dragged
      data not always easy
     Use meta-keys for fine
      resolution
                                      21
     Or arrow-keys for positioning
DRAG-N-DROP – MOBILE DEVICES




                                                                                                        14 January 2009
 One hand problem!
 Past: Only with stylus…

 Currently: Revival with touch screens / multi touch

 Future: Important!




                                                                                                       22


http://assets.gearlive.com/blogimages/gallery/iphone-113-preview/002-iphone-113-drag-calc_medium.jpg
CONTROL MANIPULATION




                                                                        14 January 2009
   Menus used to be difficult click-n-drag
    motion
      Beginners use menus often, but they are
       difficult!
      Menus now often “click-based”
   Palette Tools:
         Modal
              Not too many!
         Charged cursor
              Not for functions!
              Good for objects
   With mobile devices:
      Not yet that important
      Will get more important with more tools                         23
       available

http://z.about.com/d/graphicssoft/1/0/5/P/1/cs2-workspace-2menus.gif
OBJECT MANIPULATION




                                                         14 January 2009
   Repositioning
       Click-n-drag in certain area, constrain drags
        with meta-keys, snapping
   Resizing & reshaping
       Where to grab, vertex handles, constrains,
   3D object manipulation
       Display, input, movement, indication,
        shadow, etc., problems


   With mobile devices:
     Very difficult…
     Not often used. Difficult motion. High
                                                        24
      potential.
OBJECT MANIPULATION 3D




                                                                               14 January 2009
                                                                              25

http://www.free3dtutorials.com/userimages/dorian/11)-wireframe_view-fig.jpg
http://www.radoxist.com/download/my_works/worht_enough_shade_wire.jpg
OBJECT CONNECTION




                                         14 January 2009
   Click-n-drag to connect objects
       rubberbanding
   Find valid target locations
       Indicate with handles
   Useful to indicate connection /
    flow, but no insertion / function
    execution

   With mobile devices:
       Until now hardly ever used…
                                        26
EFFICIENCY STATS




                                                   14 January 2009
                                                27
                    Interaction Design for Handheld
                                         Computers
                   Jesper Kjeldskov and Nikolaj Kolbe
CURRENT TRENDS




                                                      14 January 2009
 Direct Manipulation Web-
  Applications (AJAX)
 Rich visual feedback
 New unsuspected uses
       Video Browsing by Direct
        Manipulation
            http://www.aviz.fr/dimp/dimp-
             chi08.pdf
   Virtual physical direct
    manipulation
       BumpTop
        http://www.youtube.com/watch?v=M0ODskdEPnQ

   Devices: Motion, alignment,
                                                     28
    position
FUTURE – PHYSICAL DIRECT MANIPULATION




                                                                                        14 January 2009
                     http://cache.gizmodo.com/assets/resources/2007/08/405587346_ba45
                     30bdbd.jpg




                                                                                   29
3D FUTURE & PERSPECTIVE PRESENCE




                                                                               14 January 2009
http://www.cs.cmu.edu/~johnny/projects/wii/




                                              http://medien.informatik.uni-   30
                                              bremen.de/research/hci/mrt/
FUTURE – DM VS. INTERFACE AGENTS




                                                                       14 January 2009
      Direct Manipulation will stay
       important
      Become more intuitive

      Faster with better feedback

      Limits with huge data sets
            Agents can help handling that
            or: SoundTorch
                     http://vimeo.com/groups/digmed/videos/2446867




         Be polite to users and give
          them controls that let them
                                                                      31
          focus on their jobs
http://farm1.static.flickr.com/8/7157243_a5cf2853bc.jpg?v=0
14 January 2009
                         32
QUESTIONS

Más contenido relacionado

La actualidad más candente

Human computer interaction by gazegaze
Human computer interaction by gazegazeHuman computer interaction by gazegaze
Human computer interaction by gazegazegazegaze1234
 
User Interface Design Chapter 2 Galiz
User Interface Design Chapter 2 GalizUser Interface Design Chapter 2 Galiz
User Interface Design Chapter 2 GalizLatesh Malik
 
User Interface Design
User Interface DesignUser Interface Design
User Interface DesignGil Pasiona
 
Human computer interaction -Design and software process
Human computer interaction -Design and software processHuman computer interaction -Design and software process
Human computer interaction -Design and software processN.Jagadish Kumar
 
Human Computer Interaction-Basics
Human Computer Interaction-BasicsHuman Computer Interaction-Basics
Human Computer Interaction-BasicsMuhammad Asif
 
HCI 2018 (3/10) Design Models, Methodologies and Guidelines
HCI 2018 (3/10) Design Models, Methodologies and GuidelinesHCI 2018 (3/10) Design Models, Methodologies and Guidelines
HCI 2018 (3/10) Design Models, Methodologies and GuidelinesSabin Buraga
 
Introduction to Human Computer Interaction
Introduction to Human Computer InteractionIntroduction to Human Computer Interaction
Introduction to Human Computer InteractionSyira Azhari
 
Understanding the Problem Space and Conceptualizing in HCI
Understanding the Problem Space and Conceptualizing  in HCIUnderstanding the Problem Space and Conceptualizing  in HCI
Understanding the Problem Space and Conceptualizing in HCIUm e Farwa
 
HCI : Activity 1
HCI : Activity 1 HCI : Activity 1
HCI : Activity 1 autamata4
 
[1]اساسيات تفاعل الانسان مع الحاسوب
[1]اساسيات تفاعل الانسان مع الحاسوب[1]اساسيات تفاعل الانسان مع الحاسوب
[1]اساسيات تفاعل الانسان مع الحاسوبتامنيت نلالوت
 
Wimp interface
Wimp interfaceWimp interface
Wimp interfaceAbrish06
 
10 Usability Heuristics for User Interface Design
10 Usability Heuristics for User Interface Design10 Usability Heuristics for User Interface Design
10 Usability Heuristics for User Interface DesignMaxx Crawford
 
Sensor based interaction
Sensor based interaction Sensor based interaction
Sensor based interaction Mirza Israr
 
User interface design
User interface designUser interface design
User interface designAjmal Ak
 
User interface design
User interface designUser interface design
User interface designSlideshare
 
Graphical User Interface (GUI)
Graphical User Interface (GUI)Graphical User Interface (GUI)
Graphical User Interface (GUI)Estiak Khan
 

La actualidad más candente (20)

Human computer interaction by gazegaze
Human computer interaction by gazegazeHuman computer interaction by gazegaze
Human computer interaction by gazegaze
 
User Interface Design Chapter 2 Galiz
User Interface Design Chapter 2 GalizUser Interface Design Chapter 2 Galiz
User Interface Design Chapter 2 Galiz
 
User Interface Design
User Interface DesignUser Interface Design
User Interface Design
 
Human computer interaction -Design and software process
Human computer interaction -Design and software processHuman computer interaction -Design and software process
Human computer interaction -Design and software process
 
Human Computer Interaction-Basics
Human Computer Interaction-BasicsHuman Computer Interaction-Basics
Human Computer Interaction-Basics
 
HCI 2018 (3/10) Design Models, Methodologies and Guidelines
HCI 2018 (3/10) Design Models, Methodologies and GuidelinesHCI 2018 (3/10) Design Models, Methodologies and Guidelines
HCI 2018 (3/10) Design Models, Methodologies and Guidelines
 
Introduction to Human Computer Interaction
Introduction to Human Computer InteractionIntroduction to Human Computer Interaction
Introduction to Human Computer Interaction
 
Understanding the Problem Space and Conceptualizing in HCI
Understanding the Problem Space and Conceptualizing  in HCIUnderstanding the Problem Space and Conceptualizing  in HCI
Understanding the Problem Space and Conceptualizing in HCI
 
HCI : Activity 1
HCI : Activity 1 HCI : Activity 1
HCI : Activity 1
 
[1]اساسيات تفاعل الانسان مع الحاسوب
[1]اساسيات تفاعل الانسان مع الحاسوب[1]اساسيات تفاعل الانسان مع الحاسوب
[1]اساسيات تفاعل الانسان مع الحاسوب
 
Wimp interface
Wimp interfaceWimp interface
Wimp interface
 
Good bad design
Good bad designGood bad design
Good bad design
 
User interface design
User interface designUser interface design
User interface design
 
10 Usability Heuristics for User Interface Design
10 Usability Heuristics for User Interface Design10 Usability Heuristics for User Interface Design
10 Usability Heuristics for User Interface Design
 
Sensor based interaction
Sensor based interaction Sensor based interaction
Sensor based interaction
 
User interface design
User interface designUser interface design
User interface design
 
Introduction to Human Computer Interaction
Introduction to Human Computer InteractionIntroduction to Human Computer Interaction
Introduction to Human Computer Interaction
 
User interface design
User interface designUser interface design
User interface design
 
Introduction To HCI
Introduction To HCIIntroduction To HCI
Introduction To HCI
 
Graphical User Interface (GUI)
Graphical User Interface (GUI)Graphical User Interface (GUI)
Graphical User Interface (GUI)
 

Similar a Pointing, Selecting & Direct Manipulation

Usability/Accessibility 2013
Usability/Accessibility 2013Usability/Accessibility 2013
Usability/Accessibility 2013Randall Arnold
 
UX Design for Mobile Apps
UX Design for Mobile AppsUX Design for Mobile Apps
UX Design for Mobile AppsKamil Zieba
 
Confoo 2012-03-01 - Building mobile experiences that don't suck
Confoo 2012-03-01 - Building mobile experiences that don't suckConfoo 2012-03-01 - Building mobile experiences that don't suck
Confoo 2012-03-01 - Building mobile experiences that don't suckFrédéric Harper
 
Website usability best practices a marketing perspective
Website usability best practices   a marketing perspectiveWebsite usability best practices   a marketing perspective
Website usability best practices a marketing perspectiveRegalix
 
Introduction to mobile user experience
Introduction to mobile user experienceIntroduction to mobile user experience
Introduction to mobile user experiencePeter Van Dijck
 
User-Centered Mobile Concept Development
User-Centered Mobile Concept DevelopmentUser-Centered Mobile Concept Development
User-Centered Mobile Concept DevelopmentSøren Engelbrecht
 
ADM: Mobile banking and trading website - Keytrade Bank
ADM: Mobile banking and trading website - Keytrade BankADM: Mobile banking and trading website - Keytrade Bank
ADM: Mobile banking and trading website - Keytrade BankHuman Interface Group
 
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe AcceleratorUI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Acceleratoranaalbir
 
T3con10_html5_kosack_zinner
T3con10_html5_kosack_zinnerT3con10_html5_kosack_zinner
T3con10_html5_kosack_zinnerRobert Zinner
 
Define & design apps for success en
Define & design apps for success enDefine & design apps for success en
Define & design apps for success enAcrmnet s.r.l.
 
Mobile User Experience – A key to successful strategies in the mobile market
Mobile User Experience – A key to successful strategies in the mobile marketMobile User Experience – A key to successful strategies in the mobile market
Mobile User Experience – A key to successful strategies in the mobile marketHenrik Hedegaard
 
UX for Apps - GDG at BUET 9 Nov 2013 Masrur Hannan and Shadman Rahman
UX for Apps - GDG at BUET 9 Nov 2013 Masrur Hannan and Shadman RahmanUX for Apps - GDG at BUET 9 Nov 2013 Masrur Hannan and Shadman Rahman
UX for Apps - GDG at BUET 9 Nov 2013 Masrur Hannan and Shadman RahmanMasrur Hannan
 
UX test of Leap Motion Controller by UID
UX test of Leap Motion Controller by UID UX test of Leap Motion Controller by UID
UX test of Leap Motion Controller by UID Tobias Limbach
 
CSS for Touch Devices
CSS for Touch DevicesCSS for Touch Devices
CSS for Touch DevicesEmma Woods
 
Mobile User Experience
Mobile User ExperienceMobile User Experience
Mobile User ExperienceDonna Lichaw
 
Touch UIs are Quite Different
Touch UIs are Quite DifferentTouch UIs are Quite Different
Touch UIs are Quite DifferentPanu Korhonen
 
Euro IA 2010: Start your IA with Mobile!
Euro IA 2010: Start your IA with Mobile!Euro IA 2010: Start your IA with Mobile!
Euro IA 2010: Start your IA with Mobile!Unic
 

Similar a Pointing, Selecting & Direct Manipulation (20)

Thinking mobile
Thinking mobileThinking mobile
Thinking mobile
 
Usability/Accessibility 2013
Usability/Accessibility 2013Usability/Accessibility 2013
Usability/Accessibility 2013
 
UX Design for Mobile Apps
UX Design for Mobile AppsUX Design for Mobile Apps
UX Design for Mobile Apps
 
Confoo 2012-03-01 - Building mobile experiences that don't suck
Confoo 2012-03-01 - Building mobile experiences that don't suckConfoo 2012-03-01 - Building mobile experiences that don't suck
Confoo 2012-03-01 - Building mobile experiences that don't suck
 
Website usability best practices a marketing perspective
Website usability best practices   a marketing perspectiveWebsite usability best practices   a marketing perspective
Website usability best practices a marketing perspective
 
Introduction to mobile user experience
Introduction to mobile user experienceIntroduction to mobile user experience
Introduction to mobile user experience
 
User-Centered Mobile Concept Development
User-Centered Mobile Concept DevelopmentUser-Centered Mobile Concept Development
User-Centered Mobile Concept Development
 
ADM: Mobile banking and trading website - Keytrade Bank
ADM: Mobile banking and trading website - Keytrade BankADM: Mobile banking and trading website - Keytrade Bank
ADM: Mobile banking and trading website - Keytrade Bank
 
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe AcceleratorUI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
 
Achi 2013
Achi 2013Achi 2013
Achi 2013
 
T3con10_html5_kosack_zinner
T3con10_html5_kosack_zinnerT3con10_html5_kosack_zinner
T3con10_html5_kosack_zinner
 
Define & design apps for success en
Define & design apps for success enDefine & design apps for success en
Define & design apps for success en
 
Mobile User Experience – A key to successful strategies in the mobile market
Mobile User Experience – A key to successful strategies in the mobile marketMobile User Experience – A key to successful strategies in the mobile market
Mobile User Experience – A key to successful strategies in the mobile market
 
UX for Apps - GDG at BUET 9 Nov 2013 Masrur Hannan and Shadman Rahman
UX for Apps - GDG at BUET 9 Nov 2013 Masrur Hannan and Shadman RahmanUX for Apps - GDG at BUET 9 Nov 2013 Masrur Hannan and Shadman Rahman
UX for Apps - GDG at BUET 9 Nov 2013 Masrur Hannan and Shadman Rahman
 
UX test of Leap Motion Controller by UID
UX test of Leap Motion Controller by UID UX test of Leap Motion Controller by UID
UX test of Leap Motion Controller by UID
 
CSS for Touch Devices
CSS for Touch DevicesCSS for Touch Devices
CSS for Touch Devices
 
Android UI Design Tips
Android UI Design TipsAndroid UI Design Tips
Android UI Design Tips
 
Mobile User Experience
Mobile User ExperienceMobile User Experience
Mobile User Experience
 
Touch UIs are Quite Different
Touch UIs are Quite DifferentTouch UIs are Quite Different
Touch UIs are Quite Different
 
Euro IA 2010: Start your IA with Mobile!
Euro IA 2010: Start your IA with Mobile!Euro IA 2010: Start your IA with Mobile!
Euro IA 2010: Start your IA with Mobile!
 

Más de J S

IUI 2010: An Informal Summary of the International Conference on Intelligent ...
IUI 2010: An Informal Summary of the International Conference on Intelligent ...IUI 2010: An Informal Summary of the International Conference on Intelligent ...
IUI 2010: An Informal Summary of the International Conference on Intelligent ...J S
 
Con-Action Project Midterm Presentation
Con-Action Project Midterm PresentationCon-Action Project Midterm Presentation
Con-Action Project Midterm PresentationJ S
 
Video Games: The Playful Medium
Video Games: The Playful MediumVideo Games: The Playful Medium
Video Games: The Playful MediumJ S
 
Summary of the Course in General Linguistics
Summary of the Course in General LinguisticsSummary of the Course in General Linguistics
Summary of the Course in General LinguisticsJ S
 
Mobile Educational Ralley - The Bremen Adventure
Mobile Educational Ralley - The Bremen AdventureMobile Educational Ralley - The Bremen Adventure
Mobile Educational Ralley - The Bremen AdventureJ S
 
Where The Action Is In Psychology
Where The Action Is In PsychologyWhere The Action Is In Psychology
Where The Action Is In PsychologyJ S
 
Journey Through The Age Of Electronic (Re)Production Of Music
Journey Through The Age Of Electronic (Re)Production Of MusicJourney Through The Age Of Electronic (Re)Production Of Music
Journey Through The Age Of Electronic (Re)Production Of MusicJ S
 

Más de J S (7)

IUI 2010: An Informal Summary of the International Conference on Intelligent ...
IUI 2010: An Informal Summary of the International Conference on Intelligent ...IUI 2010: An Informal Summary of the International Conference on Intelligent ...
IUI 2010: An Informal Summary of the International Conference on Intelligent ...
 
Con-Action Project Midterm Presentation
Con-Action Project Midterm PresentationCon-Action Project Midterm Presentation
Con-Action Project Midterm Presentation
 
Video Games: The Playful Medium
Video Games: The Playful MediumVideo Games: The Playful Medium
Video Games: The Playful Medium
 
Summary of the Course in General Linguistics
Summary of the Course in General LinguisticsSummary of the Course in General Linguistics
Summary of the Course in General Linguistics
 
Mobile Educational Ralley - The Bremen Adventure
Mobile Educational Ralley - The Bremen AdventureMobile Educational Ralley - The Bremen Adventure
Mobile Educational Ralley - The Bremen Adventure
 
Where The Action Is In Psychology
Where The Action Is In PsychologyWhere The Action Is In Psychology
Where The Action Is In Psychology
 
Journey Through The Age Of Electronic (Re)Production Of Music
Journey Through The Age Of Electronic (Re)Production Of MusicJourney Through The Age Of Electronic (Re)Production Of Music
Journey Through The Age Of Electronic (Re)Production Of Music
 

Último

2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptxSandy Millin
 
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxPISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxEduSkills OECD
 
Presentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphPresentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphNetziValdelomar1
 
The Singapore Teaching Practice document
The Singapore Teaching Practice documentThe Singapore Teaching Practice document
The Singapore Teaching Practice documentXsasf Sfdfasd
 
The basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptxThe basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptxheathfieldcps1
 
Human-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming ClassesHuman-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming ClassesMohammad Hassany
 
CAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxCAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxSaurabhParmar42
 
Diploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfDiploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfMohonDas
 
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...Nguyen Thanh Tu Collection
 
5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...CaraSkikne1
 
HED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfHED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfMohonDas
 
Patterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptxPatterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptxMYDA ANGELICA SUAN
 
Education and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxEducation and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxraviapr7
 
M-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxM-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxDr. Santhosh Kumar. N
 
Prescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxPrescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxraviapr7
 
3.21.24 The Origins of Black Power.pptx
3.21.24  The Origins of Black Power.pptx3.21.24  The Origins of Black Power.pptx
3.21.24 The Origins of Black Power.pptxmary850239
 
Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.raviapr7
 
How to Make a Field read-only in Odoo 17
How to Make a Field read-only in Odoo 17How to Make a Field read-only in Odoo 17
How to Make a Field read-only in Odoo 17Celine George
 

Último (20)

2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
 
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxPISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
 
Personal Resilience in Project Management 2 - TV Edit 1a.pdf
Personal Resilience in Project Management 2 - TV Edit 1a.pdfPersonal Resilience in Project Management 2 - TV Edit 1a.pdf
Personal Resilience in Project Management 2 - TV Edit 1a.pdf
 
Presentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphPresentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a Paragraph
 
The Singapore Teaching Practice document
The Singapore Teaching Practice documentThe Singapore Teaching Practice document
The Singapore Teaching Practice document
 
The basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptxThe basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptx
 
Human-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming ClassesHuman-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming Classes
 
CAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxCAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptx
 
Diploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfDiploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdf
 
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
 
5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...
 
HED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfHED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdf
 
Finals of Kant get Marx 2.0 : a general politics quiz
Finals of Kant get Marx 2.0 : a general politics quizFinals of Kant get Marx 2.0 : a general politics quiz
Finals of Kant get Marx 2.0 : a general politics quiz
 
Patterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptxPatterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptx
 
Education and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxEducation and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptx
 
M-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxM-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptx
 
Prescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxPrescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptx
 
3.21.24 The Origins of Black Power.pptx
3.21.24  The Origins of Black Power.pptx3.21.24  The Origins of Black Power.pptx
3.21.24 The Origins of Black Power.pptx
 
Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.
 
How to Make a Field read-only in Odoo 17
How to Make a Field read-only in Odoo 17How to Make a Field read-only in Odoo 17
How to Make a Field read-only in Odoo 17
 

Pointing, Selecting & Direct Manipulation

  • 1. POINTING, SELECTING & DIRECT MANIPULATION Old models applied to new technologies… Presentation for the class: HCI Desktop to Mobile Lecturer: Dennis Krannich Place & Time: Uni Bremen, 14. Jan. 2009 Presenters: Mohammad Shahin & Jan Smeddinck http://www.io.com/~hcexres/power_tools/teams/glove_small.gif http://www.freewebs.com/sonypsfree/nintendo_ds_lite.jpg http://scr3.golem.de/screenshots/0807/iPhone_3G/xx_iphone3g_pair.jpg
  • 2. DIRECT MANIPULATION – REDUCE COMPLEXITY 14 January 2009 2
  • 3. DOMAIN - TERRY WINOGRAD 14 January 2009  From direct manipulation to “being there”:  We interact with the world around us in three main ways; manipulation, locomotion, and conversation.  manipulation: move things around with hands  locomotion: move oneself from place to place  conversation: say something and another person says something back 3 http://www.stanford.edu/group/dschool/images/left/people_terry_winograd_top.jpg
  • 4. ABOUT FACE 3.0: THE ESSENTIALS OF INTERACTION DESIGN 14 January 2009  by Alan Cooper, Robert Reimann, Dave Cronin  A “how-to” book  How to design the user experience based on first identifying user goals and then building and utilizing personas to build user-centered interaction  Not all that scientific, but useful  First edition (1995), now: 3.0 (2007)  Today: Chapter 19  www.cooper.com 4
  • 5. DIRECT MANIPULATION 14 January 2009 Definition: A human-computer interaction style which involves continuous representation of objects of interest, and rapid, reversible, incremental actions and feedback 5
  • 6. EXAMPLE 14 January 2009  Showing direct manipulation in Windows Explorer 6
  • 7. COINED BY SHNEIDERMAN, 1974 14 January 2009 1. Visual representation of manipulated objects 2. Physical actions instead of text entry 3. Immediately visible impact of the operation 7
  • 8. 7 VARIETIES OF DIRECT MANIPULATION 14 January 2009 1. Pointing 2. Selection 3. Drag and drop 4. Control manipulation 5. Palette tools 6. Object manipulation 7. Object connection  Program manipulation vs. content manipulation 8 http://www.allhatnocattle.net/swiss-knife.jpg
  • 9. POINTING DEVICES 14 January 2009  The mouse  Alternatives:  Light Pens / CRTs  Trackball  Tablets  Touchpads  Touchscreens 9
  • 10. USING THE MOUSE 14 January 2009  Mouse buttons  The left mouse button  The right mouse button  The middle mouse button  The scroll wheel  Meta-keys  Pointing and clicking  Pointing  Clicking  Clicking and dragging  Double-clicking  Chord-clicking 10  Double-clicking and dragging
  • 11. 14 January 2009 11 POINTING
  • 12. 14 January 2009 12 CLICKING
  • 13. CLICKING & DRAGGING 14 January 2009 13
  • 14. DOUBLE-CLICKING 14 January 2009 14
  • 15. EVENTS: MOUSE-UP & MOUSE-DOWN 14 January 2009  Mouse-down over an object or data should select the object or data  Mouse-down over controls means propose action; mouse-up means commit to action. 15
  • 16. POINTING AND THE CURSOR 14 January 2009  Pliancy and Hinting  Object hinting  Cursor hinting  Wait cursor hinting 16
  • 17. SELECTION 14 January 2009  The act of choosing an object or control is referred to as selection  Command ordering and selection  verb-object and object-verb order  Discrete and contiguous selection  Mutual exclusion  Additive selection  Group Selection  Insertion and replacement  Visual indication of selection 17
  • 18. PLAYTIME 14 January 2009  http://www.dontclick.it/ 18
  • 19. DRAG-N-DROP 14 January 2009  Very powerful idiom!  Efficient: Connects 2 locations with a function (in 1 move)  source -> target  Drag to new position / window / function icon (trash)  Interior vs. external  External difficult:  interface standards, target capabilities, formats, DnD data vs. functions, no standard  Long time little use online. That changes… 19  e.g. http://www.bbc.co.uk/
  • 20. DRAG-N-DROP - INTERACTIONS 14 January 2009  Forgiving interaction: Encourage users to try out DM  Indicate drop targets  not by cursor-hinting!  No drop-target = no action  Hinting at drag pliancy difficult  Assume: Everything is dragable  Show visual indication while dragging  Use insertion targets, when necessary  Indicate completion 20
  • 21. DRAG-N-DROP - ISSUES 14 January 2009  Auto-scroll! (where to begin, how fast?)  Not automatic scrollbar insertion, but automatic scroll-movement  Selecting vs. dragging  need drag-threshold after click  Fine scrolling  Exact positioning of dragged data not always easy  Use meta-keys for fine resolution 21  Or arrow-keys for positioning
  • 22. DRAG-N-DROP – MOBILE DEVICES 14 January 2009  One hand problem!  Past: Only with stylus…  Currently: Revival with touch screens / multi touch  Future: Important! 22 http://assets.gearlive.com/blogimages/gallery/iphone-113-preview/002-iphone-113-drag-calc_medium.jpg
  • 23. CONTROL MANIPULATION 14 January 2009  Menus used to be difficult click-n-drag motion  Beginners use menus often, but they are difficult!  Menus now often “click-based”  Palette Tools:  Modal  Not too many!  Charged cursor  Not for functions!  Good for objects  With mobile devices:  Not yet that important  Will get more important with more tools 23 available http://z.about.com/d/graphicssoft/1/0/5/P/1/cs2-workspace-2menus.gif
  • 24. OBJECT MANIPULATION 14 January 2009  Repositioning  Click-n-drag in certain area, constrain drags with meta-keys, snapping  Resizing & reshaping  Where to grab, vertex handles, constrains,  3D object manipulation  Display, input, movement, indication, shadow, etc., problems  With mobile devices:  Very difficult…  Not often used. Difficult motion. High 24 potential.
  • 25. OBJECT MANIPULATION 3D 14 January 2009 25 http://www.free3dtutorials.com/userimages/dorian/11)-wireframe_view-fig.jpg http://www.radoxist.com/download/my_works/worht_enough_shade_wire.jpg
  • 26. OBJECT CONNECTION 14 January 2009  Click-n-drag to connect objects  rubberbanding  Find valid target locations  Indicate with handles  Useful to indicate connection / flow, but no insertion / function execution  With mobile devices:  Until now hardly ever used… 26
  • 27. EFFICIENCY STATS 14 January 2009 27 Interaction Design for Handheld Computers Jesper Kjeldskov and Nikolaj Kolbe
  • 28. CURRENT TRENDS 14 January 2009  Direct Manipulation Web- Applications (AJAX)  Rich visual feedback  New unsuspected uses  Video Browsing by Direct Manipulation  http://www.aviz.fr/dimp/dimp- chi08.pdf  Virtual physical direct manipulation  BumpTop http://www.youtube.com/watch?v=M0ODskdEPnQ  Devices: Motion, alignment, 28 position
  • 29. FUTURE – PHYSICAL DIRECT MANIPULATION 14 January 2009 http://cache.gizmodo.com/assets/resources/2007/08/405587346_ba45 30bdbd.jpg 29
  • 30. 3D FUTURE & PERSPECTIVE PRESENCE 14 January 2009 http://www.cs.cmu.edu/~johnny/projects/wii/ http://medien.informatik.uni- 30 bremen.de/research/hci/mrt/
  • 31. FUTURE – DM VS. INTERFACE AGENTS 14 January 2009  Direct Manipulation will stay important  Become more intuitive  Faster with better feedback  Limits with huge data sets  Agents can help handling that  or: SoundTorch  http://vimeo.com/groups/digmed/videos/2446867  Be polite to users and give them controls that let them 31 focus on their jobs http://farm1.static.flickr.com/8/7157243_a5cf2853bc.jpg?v=0
  • 32. 14 January 2009 32 QUESTIONS