SlideShare ist ein Scribd-Unternehmen logo
1 von 25
Interface Design




                           What it is and what are those
                       factors/issues which drive a good
                                       Interface Design ?



-13   January 2012   -Made   by Utpal Ray                   -1
Interface Design


                      3 kinds of Interface Design

       Interface with existing systems and entities.

       Interface among different S/W Components.

  Interface with Human Interface ( which is our interests ).




-13   January 2012      -Made   by Utpal Ray                    -2
Interface Design


                3 kinds of Human Computer Interface

       Legacy system human Interface ( through Dumb Terminal using
       commands and forms ).

       Modern PC Interface ( through GUI using pointing device ).

       Embedded system Human Interface ( Cell Phone, PDA etc. ).



                     Our Interest lies in the 2nd one.




-13   January 2012       -Made   by Utpal Ray                        -3
Interface Design


                        Interface Design Activities

          Users Profiling

          User Task Analysis

          Defining Screen Layouts, Interface Objects and actions

          Design Evaluation


                     (If necessary prototyping should be done)



-13   January 2012         -Made   by Utpal Ray                     -4
Interface Design


                                 User Profiling

          What kind of users will be using the system ?

          Whether the users are novice or knowledgeable ?

          What is the frequencies of usage ?

          What will be the duration of each session ?




-13   January 2012       -Made   by Utpal Ray                -5
Interface Design



                          User Task Analysis

          What kind of tasks are performed by the users ?

          Prepare a list of tasks performed by the users. In this regard ERD
           will be of much help.




-13   January 2012       -Made   by Utpal Ray                                   -6
Interface Design




             Defining Screen Layout, Objects and actions



          Task to screen mapping is done here.

          For each screen all the objects and actions need to be defined.

          Special care should be taken while choosing color, font, size etc.




-13   January 2012       -Made   by Utpal Ray                                   -7
Interface Design
                             Task to Screen Mapping

   Input Task Screen Layout

                                         Menu

Fields



                  Action Buttons                     Update Task Screen Layout




   -13   January 2012         -Made   by Utpal Ray                               -8
Interface Design
                      Interface Design Evaluation

          Number of Actions per Tasks ( Minimum no of mouse clicks
           required to perform most frequently used tasks ).

          Learnability ( How Long it takes for an average user to learn this new
           interface ? Also, how long it takes for a novice? ).

          Whether the Interface is self explanatory ? ( A first time user should
           be able to understand the interface without much help from an
           experienced user. )

          Ease of Use ( Whether using the interface is a burden for the user? ).

          Whether all the Interface Design Issues have been considered and
           taken care of ?


-13   January 2012       -Made   by Utpal Ray                                       -9
Interface Design


                      Interface Design Issue

 1.        System Response Time
 2.        User Help Facility
 3.        Error Information Handling
 4.        GUI vs. Command Line Interface
 5.        User’s Memory Load Reduction
 6.        Interface Consistency
 7.        Real Life Resemblance
 8.        User Diversity
 9.        Information Presentation
 10.       Color Usage




-13   January 2012     -Made   by Utpal Ray        -10
Interface Design


              Interface Design Issue : System Response Time



       It is measured from the point when the user perform some control
       action ( hitting the ‘return’ key or ‘clicking’ the mouse), to the point
       where system gives required response.

       System Response Time has two important characteristics ‘length’ and
       ‘variability’.




-13   January 2012       -Made   by Utpal Ray                                     -11
Interface Design

 Interface Design Issue : System Response Time – Length &
   Variability

       If length is too long user will be frustrated. If length is too short, user
       may be forced into errors.

       Variability refers to the deviation from average response time. In many
       ways it is the most important response time characteristics.

       Low Variability enables the user to establish an interaction
       rhythm, even if the response time is relatively long.

       For High Variability, the user is always off balance – wondering whether
       something is gone wrong.




-13   January 2012       -Made   by Utpal Ray                                        -12
Interface Design

               Interface Design Issue :User Help Facility

       The best help facility for any interface is the context based help facility.
       This kind of help facility allows a user to get help for the current screen
       where he is performing the actions.

       There may be also a help button. This allows the user to enter the help
       system to the top level.

       But surely help system should provide other user-entry points also. For
       example, when user encounters an error in any particular screen, he
       should be able to get an explanation of the error message by entering
       the help system to a relevant level.

       The help facility can be displayed through multiple windows or
       overlaying on the same window again and again. Each of this
       approaches have it’s own pros and cons.

-13   January 2012       -Made   by Utpal Ray                                     -13
Interface Design

  Interface Design Issue : Error Information Handling

 1.        The error message should describe the problem in such a way, that
           an ordinary user without a special skill should be able to
           understand.

 2.        The error message should provide a constructive advice to the user
           regarding recovering from the current error.

 3.        The error message should indicate any negative consequences of the
           error so that the user can verify to correct it.

 4.        The message should be accompanied by an audible or visual cue.




-13   January 2012       -Made   by Utpal Ray                                   -14
Interface Design
 Interface Design Issue : Error Information Handling ( contd. )

A Bad Error Message

                        Error #27
      ?              Invalid Patient Id

                                                                  A Good Error Message
       OK              cancel
                                                            Patient J. Kumar is Not Registered
                                                       Click on Patients for a list of registered Patient
                                                          Click on Retry to re-input a patient name
                                                              Click on help for more information



                                                   Patient           Help           Retry        Cancel


-13   January 2012              -Made   by Utpal Ray                                                  -15
Interface Design

 Interface Design Issue : GUI vs. Command Line Interface



       It may be necessary to give also a separate command line Interface. This
       helps some user to create a bunch of automated task, which otherwise
       would have taken manual intervention.

       In case there is a CLI; it is better to give command for every GUI Menus.
       One also has to create a separate Help Facility for CLI.




-13   January 2012      -Made   by Utpal Ray                                  -16
Interface Design


 Interface Design Issue : User’s Memory Load Reduction


       A well designed user’s interface should not tax the user’s memory. The
       system should remember the initial values and intermediate values
       entered. So whenever necessary, it should provide that values to the
       current screen.

       For frequently performed task, a separate set of buttons can be
       provided to ease the user’s memory load’

       When mnemonics are used to accomplish a system function, the
       mnemonics should be tied to the action in a way that is easy to
       remember. ( Alt-P to accomplish printing )




-13   January 2012      -Made   by Utpal Ray                                    -17
Interface Design


            Interface Design Issue : Interface Consistency

       The interface should always maintain a consistent view for all similar
       actions. So that the user gets used to the same interface view for the
       same set of actions. For example, the ‘input’ screen and the ‘update’
       screen should have a similar look and feel.

       If the past interactive models have created any certain user expectation;
       then do not make changes unless there is a compelling reason to do so.
       For example, if Alt-S has been used for ‘saving’ then do not change it
       for ‘scaling’.




-13   January 2012      -Made   by Utpal Ray                                    -18
Interface Design

            Interface Design Issue : Real Life Resemblance

       The look and feel of the GUI should be very much close to the real life
       scenario, wherever possible. For example, a railway-reservation
       interface should have a picture of Rails, stations etc., just to remind the
       user that; the actions he will be performing now are related with trains.

       Similarly for a bill payment system, an image of a check at the
       background would create a nice effect for the user.




-13   January 2012      -Made   by Utpal Ray                                     -19
Interface Design


                     Interface Design Issue : User Diversity



       The interface should take care regarding presenting different look and
       feel for different skill level of the users.

       The look and feel of the GUI presented to a novice user should be
       different than the look and feel for a knowledgeable user; where a
       knowledgeable user may like to navigate through a series of complex
       menus and sub-menus to perform complex tasks more easily.




-13   January 2012          -Made   by Utpal Ray                                -20
Interface Design


           Interface Design Issue : Information Presentation



  Information can be presented in mainly two different ways; either by
       texts or by graphical displays. Which one suits best, will be depending
       upon the context the information is being presented and read. For
       example temperature can be shown in a so many different ways; one
       has to choose a certain way to match with the requirement.




-13   January 2012      -Made   by Utpal Ray                                     -21
Interface Design
 Interface Design Issue : Information Presentation ( contd. )
 ( Temperature can be displayed in so many different ways )


TEMP            32.34 C                          32F           212F



100C
 75C                                                     20C
      50C

      25C                                          50C         30C

       0C
                                                         40C

-13   January 2012        -Made   by Utpal Ray                        -22
Interface Design
                 Interface Design Issue : Color Usage


 1.        One should not use more than four or five separate color in a window and
           no more than seven in a system interface. One should not use it simply to
           brighten up the interface.

 2.        Color change can be used to show a change in system status. For
           example, for a fuel gauge display, change of color may indicate that fuel is
           running low.

 3.        One should use color coding in a thoughtful and consistent way. If one part
           of system displays error messages in red (say), then all other part should do
           likewise. You should be aware that users with different background may
           have assumptions about meaning of particular colors. For example, to a
           driver ‘red’ means danger. However, to a chemist, ‘red’ means hot.

 4.        One should be careful regarding color pairing. Because of the physiology of
           the eye, people cannot focus on red and blue simultaneously. Eyestrain is a
           likely consequence of a red on blue display.



-13   January 2012         -Made   by Utpal Ray                                            -23
Interface Design
         Interface Design Issue : Color Usage ( Color Pairing )




-13   January 2012    -Made   by Utpal Ray                        -24
Interface Design


                         Home Task



 1.        Think of at least three other Interface Design Issues which are
           important during Interface Design Activities.

 2.        Assume that SafeHome system can be reached through internet.
           Design atleast three different interactive screen for the SafeHome
           security system. Thsese screens will perform some tasks which could
           have been initiated through control panel also.




-13   January 2012       -Made   by Utpal Ray                                -25

Weitere ähnliche Inhalte

Was ist angesagt?

2.3 people and ict systems
2.3 people and ict systems2.3 people and ict systems
2.3 people and ict systems
mrmwood
 
Human machine interfacing
Human machine interfacingHuman machine interfacing
Human machine interfacing
Zeeshan Hasan
 

Was ist angesagt? (20)

Intel Ultrabook AppLab - ALL Slides
Intel Ultrabook AppLab - ALL SlidesIntel Ultrabook AppLab - ALL Slides
Intel Ultrabook AppLab - ALL Slides
 
Modelling the User Interface
Modelling the User InterfaceModelling the User Interface
Modelling the User Interface
 
Cheap& Quick Internal user testing
Cheap& Quick Internal user testingCheap& Quick Internal user testing
Cheap& Quick Internal user testing
 
User Experience 4: Usable User Interface
User Experience 4: Usable User InterfaceUser Experience 4: Usable User Interface
User Experience 4: Usable User Interface
 
UX Architecture for the Small Guy
UX Architecture for the Small GuyUX Architecture for the Small Guy
UX Architecture for the Small Guy
 
Vp all slides
Vp   all slidesVp   all slides
Vp all slides
 
Human Factors and User Interface Design
Human Factors and User Interface DesignHuman Factors and User Interface Design
Human Factors and User Interface Design
 
Seii unit5 ui_design
Seii unit5 ui_designSeii unit5 ui_design
Seii unit5 ui_design
 
User-Centered Design
User-Centered DesignUser-Centered Design
User-Centered Design
 
Spec lectures
Spec lecturesSpec lectures
Spec lectures
 
User Interface Design @iRajLal
User Interface Design @iRajLalUser Interface Design @iRajLal
User Interface Design @iRajLal
 
Android Development: The 20,000-Foot View
Android Development: The 20,000-Foot ViewAndroid Development: The 20,000-Foot View
Android Development: The 20,000-Foot View
 
User Experience AKA
User Experience AKAUser Experience AKA
User Experience AKA
 
User Experience 1: What is User Experience?
User Experience 1: What is User Experience?User Experience 1: What is User Experience?
User Experience 1: What is User Experience?
 
2.3 people and ict systems
2.3 people and ict systems2.3 people and ict systems
2.3 people and ict systems
 
Human machine interfacing
Human machine interfacingHuman machine interfacing
Human machine interfacing
 
Laptop, Wholesale Laptops, China Latop
Laptop, Wholesale Laptops, China LatopLaptop, Wholesale Laptops, China Latop
Laptop, Wholesale Laptops, China Latop
 
Pert15
Pert15Pert15
Pert15
 
User Interface Design
User Interface DesignUser Interface Design
User Interface Design
 
User Interface Design Best Practices
User Interface Design Best PracticesUser Interface Design Best Practices
User Interface Design Best Practices
 

Andere mochten auch

Clase teórica 3.1
Clase teórica 3.1Clase teórica 3.1
Clase teórica 3.1
conny22
 
revista_saude_lazer_edicao2
revista_saude_lazer_edicao2revista_saude_lazer_edicao2
revista_saude_lazer_edicao2
Fernando Roveri
 
Dn11 u3 a10_vbol
Dn11 u3 a10_vbolDn11 u3 a10_vbol
Dn11 u3 a10_vbol
vrisa1992
 
Gabarito intérprete de libras
Gabarito   intérprete de librasGabarito   intérprete de libras
Gabarito intérprete de libras
secseduc
 
Topografia subterranea
Topografia subterraneaTopografia subterranea
Topografia subterranea
Sttevenn Poola
 
El papel de la familia y la escuela en el desarrollo cognitivo
El papel de la familia y la escuela en el desarrollo cognitivoEl papel de la familia y la escuela en el desarrollo cognitivo
El papel de la familia y la escuela en el desarrollo cognitivo
natalid
 

Andere mochten auch (20)

Clase teórica 3.1
Clase teórica 3.1Clase teórica 3.1
Clase teórica 3.1
 
Imperio romano(jesus sanchez)
Imperio romano(jesus sanchez)Imperio romano(jesus sanchez)
Imperio romano(jesus sanchez)
 
revista_saude_lazer_edicao2
revista_saude_lazer_edicao2revista_saude_lazer_edicao2
revista_saude_lazer_edicao2
 
Manual de inducción 2014
Manual de inducción 2014Manual de inducción 2014
Manual de inducción 2014
 
Análisis vectorial
Análisis vectorialAnálisis vectorial
Análisis vectorial
 
Dn11 u3 a10_vbol
Dn11 u3 a10_vbolDn11 u3 a10_vbol
Dn11 u3 a10_vbol
 
Cómo convierto archivos en zamzar
Cómo convierto archivos en zamzarCómo convierto archivos en zamzar
Cómo convierto archivos en zamzar
 
Sccci presentation for mmu students
Sccci presentation for mmu studentsSccci presentation for mmu students
Sccci presentation for mmu students
 
tutorial maq profesionales parte i
tutorial maq profesionales parte itutorial maq profesionales parte i
tutorial maq profesionales parte i
 
Vitaminas
VitaminasVitaminas
Vitaminas
 
Gabarito intérprete de libras
Gabarito   intérprete de librasGabarito   intérprete de libras
Gabarito intérprete de libras
 
COMO ENSEÑAR QUIMICA
COMO ENSEÑAR QUIMICACOMO ENSEÑAR QUIMICA
COMO ENSEÑAR QUIMICA
 
Topografia subterranea
Topografia subterraneaTopografia subterranea
Topografia subterranea
 
Metodo aula laboratorio
Metodo aula laboratorioMetodo aula laboratorio
Metodo aula laboratorio
 
Trabalho filosofia 13t 01
Trabalho filosofia 13t 01Trabalho filosofia 13t 01
Trabalho filosofia 13t 01
 
El papel de la familia y la escuela en el desarrollo cognitivo
El papel de la familia y la escuela en el desarrollo cognitivoEl papel de la familia y la escuela en el desarrollo cognitivo
El papel de la familia y la escuela en el desarrollo cognitivo
 
Plan operativo-inst.-2011
Plan operativo-inst.-2011Plan operativo-inst.-2011
Plan operativo-inst.-2011
 
Propuesta de Unidades de Planificación Rural. Documento explicativo.
Propuesta de Unidades de Planificación Rural. Documento explicativo.Propuesta de Unidades de Planificación Rural. Documento explicativo.
Propuesta de Unidades de Planificación Rural. Documento explicativo.
 
Administracion del desempeño
Administracion del desempeñoAdministracion del desempeño
Administracion del desempeño
 
Instrumentos de-salud-familiar
Instrumentos de-salud-familiarInstrumentos de-salud-familiar
Instrumentos de-salud-familiar
 

Ähnlich wie 07 interface design

Define & design apps for success en
Define & design apps for success enDefine & design apps for success en
Define & design apps for success en
Acrmnet s.r.l.
 
From Desktop to Mobile: Application Functionality for Small Screens
From Desktop to Mobile: Application Functionality for Small ScreensFrom Desktop to Mobile: Application Functionality for Small Screens
From Desktop to Mobile: Application Functionality for Small Screens
Joseph Labrecque
 
user-interface-design-131010063550-phpapp01.pdf
user-interface-design-131010063550-phpapp01.pdfuser-interface-design-131010063550-phpapp01.pdf
user-interface-design-131010063550-phpapp01.pdf
LPhiHng3
 

Ähnlich wie 07 interface design (20)

Android Infrastructure
Android InfrastructureAndroid Infrastructure
Android Infrastructure
 
Usability principles 1
Usability principles 1Usability principles 1
Usability principles 1
 
Define & design apps for success en
Define & design apps for success enDefine & design apps for success en
Define & design apps for success en
 
Aktu Human Computer Interface Full Pdf.pdf
Aktu Human Computer Interface Full Pdf.pdfAktu Human Computer Interface Full Pdf.pdf
Aktu Human Computer Interface Full Pdf.pdf
 
hema ppt (2).pptx
hema ppt (2).pptxhema ppt (2).pptx
hema ppt (2).pptx
 
Different Web Architectures. UI VS UX and future improvements.
Different Web Architectures. UI VS UX and future improvements.Different Web Architectures. UI VS UX and future improvements.
Different Web Architectures. UI VS UX and future improvements.
 
SWE-401 - 8. Software User Interface Design
SWE-401 - 8. Software User Interface DesignSWE-401 - 8. Software User Interface Design
SWE-401 - 8. Software User Interface Design
 
User Interface
User InterfaceUser Interface
User Interface
 
From Desktop to Mobile: Application Functionality for Small Screens
From Desktop to Mobile: Application Functionality for Small ScreensFrom Desktop to Mobile: Application Functionality for Small Screens
From Desktop to Mobile: Application Functionality for Small Screens
 
User Interface Analysis and Design
User Interface Analysis and DesignUser Interface Analysis and Design
User Interface Analysis and Design
 
SMARCOS_Paper_Mobile hci12 246
SMARCOS_Paper_Mobile hci12 246SMARCOS_Paper_Mobile hci12 246
SMARCOS_Paper_Mobile hci12 246
 
user-interface-design-131010063550-phpapp01.pdf
user-interface-design-131010063550-phpapp01.pdfuser-interface-design-131010063550-phpapp01.pdf
user-interface-design-131010063550-phpapp01.pdf
 
User interface-design
User interface-designUser interface-design
User interface-design
 
CSE 5930 Assignment 2 Documentation
CSE 5930 Assignment 2 DocumentationCSE 5930 Assignment 2 Documentation
CSE 5930 Assignment 2 Documentation
 
Interface design
Interface designInterface design
Interface design
 
Unit v
Unit vUnit v
Unit v
 
Slides chapter 12
Slides chapter 12Slides chapter 12
Slides chapter 12
 
Human computerinterface
Human computerinterfaceHuman computerinterface
Human computerinterface
 
Android UI Design Tips
Android UI Design TipsAndroid UI Design Tips
Android UI Design Tips
 
Droidcon2014 - Android UX
Droidcon2014 - Android UXDroidcon2014 - Android UX
Droidcon2014 - Android UX
 

Mehr von University of Computer Science and Technology

Mehr von University of Computer Science and Technology (20)

Real time-embedded-system-lec-02
Real time-embedded-system-lec-02Real time-embedded-system-lec-02
Real time-embedded-system-lec-02
 
Real time-embedded-system-lec-06
Real time-embedded-system-lec-06Real time-embedded-system-lec-06
Real time-embedded-system-lec-06
 
Real time-embedded-system-lec-05
Real time-embedded-system-lec-05Real time-embedded-system-lec-05
Real time-embedded-system-lec-05
 
Real time-embedded-system-lec-04
Real time-embedded-system-lec-04Real time-embedded-system-lec-04
Real time-embedded-system-lec-04
 
Real time-embedded-system-lec-03
Real time-embedded-system-lec-03Real time-embedded-system-lec-03
Real time-embedded-system-lec-03
 
Real time-embedded-system-lec-02
Real time-embedded-system-lec-02Real time-embedded-system-lec-02
Real time-embedded-system-lec-02
 
Real time-embedded-system-lec-07
Real time-embedded-system-lec-07Real time-embedded-system-lec-07
Real time-embedded-system-lec-07
 
12 software maintenance
12 software maintenance12 software maintenance
12 software maintenance
 
11 software testing_strategy
11 software testing_strategy11 software testing_strategy
11 software testing_strategy
 
10 software testing_technique
10 software testing_technique10 software testing_technique
10 software testing_technique
 
09 coding standards_n_guidelines
09 coding standards_n_guidelines09 coding standards_n_guidelines
09 coding standards_n_guidelines
 
08 component level_design
08 component level_design08 component level_design
08 component level_design
 
06 architectural design_workout
06 architectural design_workout06 architectural design_workout
06 architectural design_workout
 
05 architectural design
05 architectural design05 architectural design
05 architectural design
 
04 design concepts_n_principles
04 design concepts_n_principles04 design concepts_n_principles
04 design concepts_n_principles
 
03 requirement engineering_process
03 requirement engineering_process03 requirement engineering_process
03 requirement engineering_process
 
02 software process_models
02 software process_models02 software process_models
02 software process_models
 
01 software engineering_aspects
01 software engineering_aspects01 software engineering_aspects
01 software engineering_aspects
 
14 software technical_metrics
14 software technical_metrics14 software technical_metrics
14 software technical_metrics
 
13 software metrics
13 software metrics13 software metrics
13 software metrics
 

Kürzlich hochgeladen

1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
QucHHunhnh
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
PECB
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
ciinovamais
 
Gardella_Mateo_IntellectualProperty.pdf.
Gardella_Mateo_IntellectualProperty.pdf.Gardella_Mateo_IntellectualProperty.pdf.
Gardella_Mateo_IntellectualProperty.pdf.
MateoGardella
 
Gardella_PRCampaignConclusion Pitch Letter
Gardella_PRCampaignConclusion Pitch LetterGardella_PRCampaignConclusion Pitch Letter
Gardella_PRCampaignConclusion Pitch Letter
MateoGardella
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
heathfieldcps1
 

Kürzlich hochgeladen (20)

Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
 
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17
 
Gardella_Mateo_IntellectualProperty.pdf.
Gardella_Mateo_IntellectualProperty.pdf.Gardella_Mateo_IntellectualProperty.pdf.
Gardella_Mateo_IntellectualProperty.pdf.
 
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAPM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across Sectors
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
 
Gardella_PRCampaignConclusion Pitch Letter
Gardella_PRCampaignConclusion Pitch LetterGardella_PRCampaignConclusion Pitch Letter
Gardella_PRCampaignConclusion Pitch Letter
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17
 
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptxINDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
 

07 interface design

  • 1. Interface Design What it is and what are those factors/issues which drive a good Interface Design ? -13 January 2012 -Made by Utpal Ray -1
  • 2. Interface Design 3 kinds of Interface Design Interface with existing systems and entities. Interface among different S/W Components.  Interface with Human Interface ( which is our interests ). -13 January 2012 -Made by Utpal Ray -2
  • 3. Interface Design 3 kinds of Human Computer Interface Legacy system human Interface ( through Dumb Terminal using commands and forms ). Modern PC Interface ( through GUI using pointing device ). Embedded system Human Interface ( Cell Phone, PDA etc. ). Our Interest lies in the 2nd one. -13 January 2012 -Made by Utpal Ray -3
  • 4. Interface Design Interface Design Activities  Users Profiling  User Task Analysis  Defining Screen Layouts, Interface Objects and actions  Design Evaluation (If necessary prototyping should be done) -13 January 2012 -Made by Utpal Ray -4
  • 5. Interface Design User Profiling  What kind of users will be using the system ?  Whether the users are novice or knowledgeable ?  What is the frequencies of usage ?  What will be the duration of each session ? -13 January 2012 -Made by Utpal Ray -5
  • 6. Interface Design User Task Analysis  What kind of tasks are performed by the users ?  Prepare a list of tasks performed by the users. In this regard ERD will be of much help. -13 January 2012 -Made by Utpal Ray -6
  • 7. Interface Design Defining Screen Layout, Objects and actions  Task to screen mapping is done here.  For each screen all the objects and actions need to be defined.  Special care should be taken while choosing color, font, size etc. -13 January 2012 -Made by Utpal Ray -7
  • 8. Interface Design Task to Screen Mapping Input Task Screen Layout Menu Fields Action Buttons Update Task Screen Layout -13 January 2012 -Made by Utpal Ray -8
  • 9. Interface Design Interface Design Evaluation  Number of Actions per Tasks ( Minimum no of mouse clicks required to perform most frequently used tasks ).  Learnability ( How Long it takes for an average user to learn this new interface ? Also, how long it takes for a novice? ).  Whether the Interface is self explanatory ? ( A first time user should be able to understand the interface without much help from an experienced user. )  Ease of Use ( Whether using the interface is a burden for the user? ).  Whether all the Interface Design Issues have been considered and taken care of ? -13 January 2012 -Made by Utpal Ray -9
  • 10. Interface Design Interface Design Issue 1. System Response Time 2. User Help Facility 3. Error Information Handling 4. GUI vs. Command Line Interface 5. User’s Memory Load Reduction 6. Interface Consistency 7. Real Life Resemblance 8. User Diversity 9. Information Presentation 10. Color Usage -13 January 2012 -Made by Utpal Ray -10
  • 11. Interface Design Interface Design Issue : System Response Time It is measured from the point when the user perform some control action ( hitting the ‘return’ key or ‘clicking’ the mouse), to the point where system gives required response. System Response Time has two important characteristics ‘length’ and ‘variability’. -13 January 2012 -Made by Utpal Ray -11
  • 12. Interface Design Interface Design Issue : System Response Time – Length & Variability If length is too long user will be frustrated. If length is too short, user may be forced into errors. Variability refers to the deviation from average response time. In many ways it is the most important response time characteristics. Low Variability enables the user to establish an interaction rhythm, even if the response time is relatively long. For High Variability, the user is always off balance – wondering whether something is gone wrong. -13 January 2012 -Made by Utpal Ray -12
  • 13. Interface Design Interface Design Issue :User Help Facility The best help facility for any interface is the context based help facility. This kind of help facility allows a user to get help for the current screen where he is performing the actions. There may be also a help button. This allows the user to enter the help system to the top level. But surely help system should provide other user-entry points also. For example, when user encounters an error in any particular screen, he should be able to get an explanation of the error message by entering the help system to a relevant level. The help facility can be displayed through multiple windows or overlaying on the same window again and again. Each of this approaches have it’s own pros and cons. -13 January 2012 -Made by Utpal Ray -13
  • 14. Interface Design Interface Design Issue : Error Information Handling 1. The error message should describe the problem in such a way, that an ordinary user without a special skill should be able to understand. 2. The error message should provide a constructive advice to the user regarding recovering from the current error. 3. The error message should indicate any negative consequences of the error so that the user can verify to correct it. 4. The message should be accompanied by an audible or visual cue. -13 January 2012 -Made by Utpal Ray -14
  • 15. Interface Design Interface Design Issue : Error Information Handling ( contd. ) A Bad Error Message Error #27 ? Invalid Patient Id A Good Error Message OK cancel Patient J. Kumar is Not Registered Click on Patients for a list of registered Patient Click on Retry to re-input a patient name Click on help for more information Patient Help Retry Cancel -13 January 2012 -Made by Utpal Ray -15
  • 16. Interface Design Interface Design Issue : GUI vs. Command Line Interface It may be necessary to give also a separate command line Interface. This helps some user to create a bunch of automated task, which otherwise would have taken manual intervention. In case there is a CLI; it is better to give command for every GUI Menus. One also has to create a separate Help Facility for CLI. -13 January 2012 -Made by Utpal Ray -16
  • 17. Interface Design Interface Design Issue : User’s Memory Load Reduction A well designed user’s interface should not tax the user’s memory. The system should remember the initial values and intermediate values entered. So whenever necessary, it should provide that values to the current screen. For frequently performed task, a separate set of buttons can be provided to ease the user’s memory load’ When mnemonics are used to accomplish a system function, the mnemonics should be tied to the action in a way that is easy to remember. ( Alt-P to accomplish printing ) -13 January 2012 -Made by Utpal Ray -17
  • 18. Interface Design Interface Design Issue : Interface Consistency The interface should always maintain a consistent view for all similar actions. So that the user gets used to the same interface view for the same set of actions. For example, the ‘input’ screen and the ‘update’ screen should have a similar look and feel. If the past interactive models have created any certain user expectation; then do not make changes unless there is a compelling reason to do so. For example, if Alt-S has been used for ‘saving’ then do not change it for ‘scaling’. -13 January 2012 -Made by Utpal Ray -18
  • 19. Interface Design Interface Design Issue : Real Life Resemblance The look and feel of the GUI should be very much close to the real life scenario, wherever possible. For example, a railway-reservation interface should have a picture of Rails, stations etc., just to remind the user that; the actions he will be performing now are related with trains. Similarly for a bill payment system, an image of a check at the background would create a nice effect for the user. -13 January 2012 -Made by Utpal Ray -19
  • 20. Interface Design Interface Design Issue : User Diversity The interface should take care regarding presenting different look and feel for different skill level of the users. The look and feel of the GUI presented to a novice user should be different than the look and feel for a knowledgeable user; where a knowledgeable user may like to navigate through a series of complex menus and sub-menus to perform complex tasks more easily. -13 January 2012 -Made by Utpal Ray -20
  • 21. Interface Design Interface Design Issue : Information Presentation  Information can be presented in mainly two different ways; either by texts or by graphical displays. Which one suits best, will be depending upon the context the information is being presented and read. For example temperature can be shown in a so many different ways; one has to choose a certain way to match with the requirement. -13 January 2012 -Made by Utpal Ray -21
  • 22. Interface Design Interface Design Issue : Information Presentation ( contd. ) ( Temperature can be displayed in so many different ways ) TEMP 32.34 C 32F 212F 100C 75C 20C 50C 25C 50C 30C 0C 40C -13 January 2012 -Made by Utpal Ray -22
  • 23. Interface Design Interface Design Issue : Color Usage 1. One should not use more than four or five separate color in a window and no more than seven in a system interface. One should not use it simply to brighten up the interface. 2. Color change can be used to show a change in system status. For example, for a fuel gauge display, change of color may indicate that fuel is running low. 3. One should use color coding in a thoughtful and consistent way. If one part of system displays error messages in red (say), then all other part should do likewise. You should be aware that users with different background may have assumptions about meaning of particular colors. For example, to a driver ‘red’ means danger. However, to a chemist, ‘red’ means hot. 4. One should be careful regarding color pairing. Because of the physiology of the eye, people cannot focus on red and blue simultaneously. Eyestrain is a likely consequence of a red on blue display. -13 January 2012 -Made by Utpal Ray -23
  • 24. Interface Design Interface Design Issue : Color Usage ( Color Pairing ) -13 January 2012 -Made by Utpal Ray -24
  • 25. Interface Design Home Task 1. Think of at least three other Interface Design Issues which are important during Interface Design Activities. 2. Assume that SafeHome system can be reached through internet. Design atleast three different interactive screen for the SafeHome security system. Thsese screens will perform some tasks which could have been initiated through control panel also. -13 January 2012 -Made by Utpal Ray -25