SlideShare ist ein Scribd-Unternehmen logo
1 von 33
User Interface Analysis and Design
Sumit Singh
User Interface Designer
Infosys Ltd
User Interface Analysis and Design
User Interface (UI) Design focuses on anticipating what users might need to do.
Design of websites, computers, appliances, machines, mobile communication
devices, and software applications with the focus on the user's experience and
interaction
UI brings together concepts from interaction
design, visual design, and information architecture.
UI design is the process of taking the way a machine
works and translating it into the way a person thinks.
Everything stems from knowing your users, including
understanding their goals, skills, preferences, and
tendencies.
Why to choose This career
Answer My Question:
ASK ALL THESE QUESTION TO YOUR SELF
1. Are you perfect in coding as per company requirement?
2. You are ready to learn programming language java, c, c++ etc?
3. Are you creative person?
4. You like to designing , art work etc?
5. If you like will you know as a engineer what are the career path for you?
Now if you like to go with this career:
1. What skill is needed.
2. Define Career Path.
3. Any training required.
4. How I can approach company for this job.
5. Any Scope of higher studies.
ASK ALL THESE QUESTION TO ME
Skill Needed
Are you aware about essential front-end web development languages. – HTML, CSS, JavaScript.
Understanding skilled in modern web and application programming skills – JAVA, PHP etc.
Utilize Adobe Creative Suite programs (Basic Knowledge) - Photoshop, Illustrator, Flash & Flex to
mockup and design UI elements.
Understanding responsive web design to create user interfaces.
Conduct usability testing to identify and fix UI problems, and gather real-world intelligence from their
target market.
Utilize social networking APIs (from Facebook, Twitter, Google+, LinkedIn, Pinterest, etc.) to integrate
social actions.
Collaborate with business and IT decision makers to discuss user interface requirements and brainstorm
UI ideas.
Keep current with the latest trends and best practices of UI/UX design and HCI (human-computer
interaction).
verbal and written communication, team leadership and project management, to effectively
communicate with business decision-makers
Human Centered Design
Human centered design as “an approach to systems design and development that aims
to make interactive systems more usable by focusing on the use of the system and
applying human factors/ergonomics and usability knowledge and techniques
A growing set of human
centered design tools are used
for simulating intuitions,
opportunities and possible
futures for purposes of
emersion, reflection and
discussion.
Goal: Present a formal and methodological approach for the specification of
user interfaces integrated in the software development process.
Object-Oriented approach which covers the phases of
ImplementationDesignAnalysis
User Interface Model:
1) Task Model
2) User Model
3) Domain Model
4) Dialog Model
5) Presentation Model
* Model-Based
Code Generation
Models of Design
* Object-Oriented
Specification
Language OASIS-UI
Advantages of the Model-Based approach:
User-centered development process.
Centralised UI specification.
Design tools for an interactive and automated development.
UI design reuse.
Good and bad design
• What is wrong with the
remote on the right?
• Why is the TiVo remote so
much better designed?
– Peanut shaped to fit in hand
– Logical layout and color-
coded, distinctive buttons
– Easy to locate buttons
Interaction Design
Concept/understanding how one/individual interacts with an entity and how to design
the process of interaction of that individual with the entity. that entity can be anything
you pick it to be, for example your car, or your toaster, web browser and website that
you view in a browser.
What does an Interaction Designer do?
An interaction designer is a key player throughout the entire development process.
They will typically perform the following activities as part of a project team:
Interaction Design
• Need to take into account:
– Who the users are
– What activities are being carried out
– Where the interaction is taking place
• Need to optimize the interactions users have with a
product
– So that they match the users’ activities and needs
What to design
Interaction design
12
Keypad numbers layout
• A case of external inconsistency
1 2 3
4 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a) phones, remote controls (b) calculators, computer keypads
Key points
• Interaction design is concerned with designing interactive products to
support the way people communicate and interact in their everyday and
working lives
• It is concerned with how to create quality user experiences
• It requires taking into account a number of interdependent factors,
including context of use, type of activities, cultural differences, and user
groups
• It is multidisciplinary, involving many inputs from wide-reaching disciplines
and fields
User Interface Analysis and Design
Interface design focuses on the following
• The design of interfaces between software components
• The design of interfaces between the software and other nonhuman
producers and consumers of information
• The design of the interface between a human and the computer
User interface analysis and design has
to do with the study of people and how
they relate to technology
Spiral Process
Interface analysis (user, task, and environment analysis)
Focuses on the profile of the
users who will interact with the system.
Concentrates on users, tasks,
content and work environment .
Studies different models of system
function (as perceived from the outside).
Delineates the human- and computer-oriented
tasks that are required to achieve system function.
Interface design
Defines a set of interface objects and actions
(and their screen representations) that enable
a user to perform all defined tasks in a manner
that meets every usability goal defined for the system.
Interface construction
Begins with a prototype that enables
usage scenarios to be evaluated.
Continues with development tools
to complete the construction.
Interface validation, focuses on
The ability of the interface to implement every
user task correctly, to accommodate all task
variations, and to achieve all general user
requirements. The degree to which the interface
is easy to use and easy to learn. The users'
acceptance of the interface as a useful tool in their work.
Spiral Process
User Control
Define interaction modes in a way that does not force a user into
unnecessary or undesired actions
The user shall be able to enter and exit a mode with little
or no effort (e.g., spell check  edit text  spell check)
Provide for flexible interaction
The user shall be able to perform the same action via
keyboard commands, mouse movement, or voice recognition
Allow user interaction to be interruptible
and ‘’undo“ able
Hide technical internals from the casual user
Design for direct interaction with objects that appear on the screen
Reduce demand on short-term memory
Establish meaningful defaults
Define shortcuts that are intuitive
The visual layout of the interface should be based on a real world metaphor
Disclose information in a progressive fashion
Allow the user to put the current task into a meaningful context
Maintain consistency across a family of applications
If past interactive models have created user expectations, do not make changes
unless there is a compelling reason to do so
User Analysis Questions
1) Are the users trained professionals, technicians, clerical or manufacturing workers?
2) What level of formal education does the average user have?
3) Are the users capable of learning on their own from written materials or have they
expressed a desire for classroom training?
4) Are the users expert typists or are they keyboard phobic?
5) What is the age range of the user community?
6) Will the users be represented predominately by one gender?
7) How are users compensated for the work they perform or are they volunteers?
8) Do users work normal office hours, or do they work whenever the job is required?
9) Is the software to be an integral part of the work users do, or will it be used only
occasionally?
10) What is the primary spoken language among users?
11) What are the consequences if a user makes a mistake using the system?
12) Are users experts in the subject matter that is addressed by the system?
13) Do users want to know about the technology that sits behind the interface?
27
Introduction
• User interface design is an iterative process, where each iteration
elaborate and refines the information developed in the preceding step
• General steps for user interface design
1) Using information developed during user interface analysis, define user
interface objects and actions (operations)
2) Define events (user actions) that will cause the state of the user interface to
change; model this behavior
3) Depict each interface state as it will actually look to the end user
4) Indicate how the user interprets the state of the system from information
provided through the interface
• During all of these steps, the designer must
– Always follow the three golden rules of user interfaces.
– Model how the interface will be implemented.
– Consider the computing environment (e.g., display technology, operating
system, development tools) that will be used.
28
Guidelines for Error Messages
• The message should describe the problem in plain language that a typical
user can understand
• The message should provide constructive advice for recovering from the
error
• The message should indicate any negative consequences of the error (e.g.,
potentially corrupted data files) so that the user can check to ensure that
they have not occurred (or correct them if they have)
• The message should be accompanied by an audible or visual cue such as a
beep, momentary flashing, or a special error color
• The message should be non-judgmental
– The message should never place blame on the user
29
An effective error message philosophy can do much to improve the quality
of an interactive system and will significantly reduce user frustration when
problems do occur
Questions for Menu Labeling and
Typed Commands
• Will every menu option have a corresponding command?
• What form will a command take? A control sequence? A function key? A
typed word?
• How difficult will it be to learn and remember the commands?
• What can be done if a command is forgotten?
• Can commands be customized or abbreviated by the user?
• Are menu labels self-explanatory within the context of the interface?
• Are submenus consistent with the function implied by a master menu
item?
30
Design and Prototype Evaluation
• Before prototyping occurs, a number of evaluation criteria can be applied
during design reviews to the design model itself
– The amount of learning required by the users
• Derived from the length and complexity of the written specification and its interfaces
– The interaction time and overall efficiency
• Derived from the number of user tasks specified and the average number of actions
per task
– The memory load on users
• Derived from the number of actions, tasks, and system states
– The complexity of the interface and the degree to which it will be accepted by
the user
• Derived from the interface style, help facilities, and error handling procedures
31(More on next slide)
Design and Prototype Evaluation
(continued)
• Prototype evaluation can range from an informal test drive to a formally
designed study using statistical methods and questionnaires
• The prototype evaluation cycle consists of prototype creation followed by
user evaluation and back to prototype modification until all user issues are
resolved
• The prototype is evaluated for
– Satisfaction of user requirements
– Conformance to the three golden rules of user interface design
– Reconciliation of the four models of a user interface
32
UI design principles
● UI design must take account of the needs, experience and capabilities of the system
users.
● Designers should be aware of people’s physical and mental limitations (e.g. limited
short-term memory) and should recognize that people make mistakes.
● UI design principles underlie interface designs although not all principles are
applicable to all designs.
● Recoverability
• The system should provide some resilience to
user errors and allow the user to recover from errors. This
might include an undo facility, confirmation of destructive
actions, 'soft' deletes, etc.
● User guidance
• Some user guidance such as help systems, on-line
manuals, etc. should be supplied
● User diversity
• Interaction facilities for different types of user should be
supported. For example, some users have seeing
difficulties and so larger text should be available

Weitere ähnliche Inhalte

Was ist angesagt?

UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyCHI UX Indonesia
 
What is UI/UX and the Difference
What is UI/UX and the DifferenceWhat is UI/UX and the Difference
What is UI/UX and the DifferenceVibloo
 
What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)iFactory Digital
 
UI UX introduction
UI UX introductionUI UX introduction
UI UX introductionIsmail Norri
 
UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESUX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESJeremy Robinson
 
UI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin MalekiUI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin MalekiMatin Maleki
 
UX/UI Design and How It Works
UX/UI Design and How It WorksUX/UI Design and How It Works
UX/UI Design and How It WorksAciron Consulting
 
The difference between ux and ui design
The difference between ux and ui designThe difference between ux and ui design
The difference between ux and ui designShweta Joshi
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignKoombea
 
User interface and user experience ui ux design basics
User interface  and user experience ui ux design basicsUser interface  and user experience ui ux design basics
User interface and user experience ui ux design basicsRavi Bhadauria
 
"What Are the Key Differences between UI and UX Design?"
"What Are the Key Differences between UI and UX Design?""What Are the Key Differences between UI and UX Design?"
"What Are the Key Differences between UI and UX Design?"MITAcademy1
 
UX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designUX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designDMI
 
UX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & designUX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & designMorgan McKeagney
 

Was ist angesagt? (20)

UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and Strategy
 
What is UI/UX and the Difference
What is UI/UX and the DifferenceWhat is UI/UX and the Difference
What is UI/UX and the Difference
 
What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)
 
UI UX introduction
UI UX introductionUI UX introduction
UI UX introduction
 
UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESUX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLES
 
UI UX Design Course
UI UX Design CourseUI UX Design Course
UI UX Design Course
 
UI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin MalekiUI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin Maleki
 
UX/UI Design and How It Works
UX/UI Design and How It WorksUX/UI Design and How It Works
UX/UI Design and How It Works
 
The difference between ux and ui design
The difference between ux and ui designThe difference between ux and ui design
The difference between ux and ui design
 
What is UX design?
What is UX design? What is UX design?
What is UX design?
 
Introduction to UI UX
Introduction to UI UXIntroduction to UI UX
Introduction to UI UX
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web Design
 
Ux is not UI
Ux is not UIUx is not UI
Ux is not UI
 
User interface and user experience ui ux design basics
User interface  and user experience ui ux design basicsUser interface  and user experience ui ux design basics
User interface and user experience ui ux design basics
 
What is UX?
What is UX?What is UX?
What is UX?
 
"What Are the Key Differences between UI and UX Design?"
"What Are the Key Differences between UI and UX Design?""What Are the Key Differences between UI and UX Design?"
"What Are the Key Differences between UI and UX Design?"
 
UI UX Design Presentation
UI UX Design Presentation UI UX Design Presentation
UI UX Design Presentation
 
UX and UI
UX and UIUX and UI
UX and UI
 
UX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designUX & UI Design - Differentiate through design
UX & UI Design - Differentiate through design
 
UX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & designUX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & design
 

Ähnlich wie UI Analysis and Design

User Interface Analysis and Design
User Interface Analysis and DesignUser Interface Analysis and Design
User Interface Analysis and Design Saqib Raza
 
User interface model
User interface modelUser interface model
User interface modelazhaar345
 
Usability principles 1
Usability principles 1Usability principles 1
Usability principles 1Sameer Chavan
 
First users: Heuristics for designer/developer collaboration
First users: Heuristics for designer/developer collaborationFirst users: Heuristics for designer/developer collaboration
First users: Heuristics for designer/developer collaborationJonathan Abbett
 
Software engg. pressman_ch-12
Software engg. pressman_ch-12Software engg. pressman_ch-12
Software engg. pressman_ch-12Dhairya Joshi
 
User Experience & Design…Designing for others…UED
User Experience & Design…Designing for others…UEDUser Experience & Design…Designing for others…UED
User Experience & Design…Designing for others…UEDPreeti Chopra
 
HCI LAB MANUAL
HCI LAB MANUAL HCI LAB MANUAL
HCI LAB MANUAL Um e Farwa
 
User Interface Design_Csc2204_lecture 1_-_introduction
User Interface Design_Csc2204_lecture 1_-_introduction User Interface Design_Csc2204_lecture 1_-_introduction
User Interface Design_Csc2204_lecture 1_-_introduction ENGWAU TONNY
 
User Experience as a Strategic Advantage
User Experience as a Strategic AdvantageUser Experience as a Strategic Advantage
User Experience as a Strategic AdvantageMichael Dubakov
 
Ux Overview
Ux OverviewUx Overview
Ux Overviewmbrosset
 
Game interface design part 2
Game interface design part 2Game interface design part 2
Game interface design part 2Durgesh Pandey
 

Ähnlich wie UI Analysis and Design (20)

User Interface Analysis and Design
User Interface Analysis and DesignUser Interface Analysis and Design
User Interface Analysis and Design
 
Slides chapter 12
Slides chapter 12Slides chapter 12
Slides chapter 12
 
User interface model
User interface modelUser interface model
User interface model
 
Usability principles 1
Usability principles 1Usability principles 1
Usability principles 1
 
UI architecture & designing
UI architecture & designingUI architecture & designing
UI architecture & designing
 
Unit - 1 - HCI.pptx
Unit - 1 - HCI.pptxUnit - 1 - HCI.pptx
Unit - 1 - HCI.pptx
 
Unit - 1 - HCI.pptx
Unit - 1 - HCI.pptxUnit - 1 - HCI.pptx
Unit - 1 - HCI.pptx
 
Unit - 1 - HCI.pptx
Unit - 1 - HCI.pptxUnit - 1 - HCI.pptx
Unit - 1 - HCI.pptx
 
HCI Presentation
HCI PresentationHCI Presentation
HCI Presentation
 
Ux design-fundamentals
Ux design-fundamentalsUx design-fundamentals
Ux design-fundamentals
 
First users: Heuristics for designer/developer collaboration
First users: Heuristics for designer/developer collaborationFirst users: Heuristics for designer/developer collaboration
First users: Heuristics for designer/developer collaboration
 
Software engg. pressman_ch-12
Software engg. pressman_ch-12Software engg. pressman_ch-12
Software engg. pressman_ch-12
 
User Experience & Design…Designing for others…UED
User Experience & Design…Designing for others…UEDUser Experience & Design…Designing for others…UED
User Experience & Design…Designing for others…UED
 
Unit v
Unit vUnit v
Unit v
 
The Science behind Good UIs and UXs
The Science behind Good UIs and UXsThe Science behind Good UIs and UXs
The Science behind Good UIs and UXs
 
HCI LAB MANUAL
HCI LAB MANUAL HCI LAB MANUAL
HCI LAB MANUAL
 
User Interface Design_Csc2204_lecture 1_-_introduction
User Interface Design_Csc2204_lecture 1_-_introduction User Interface Design_Csc2204_lecture 1_-_introduction
User Interface Design_Csc2204_lecture 1_-_introduction
 
User Experience as a Strategic Advantage
User Experience as a Strategic AdvantageUser Experience as a Strategic Advantage
User Experience as a Strategic Advantage
 
Ux Overview
Ux OverviewUx Overview
Ux Overview
 
Game interface design part 2
Game interface design part 2Game interface design part 2
Game interface design part 2
 

Mehr von sumit singh

Mehr von sumit singh (10)

Growth hacking
Growth hackingGrowth hacking
Growth hacking
 
Data structure
Data structureData structure
Data structure
 
IP fundamentals
IP fundamentals IP fundamentals
IP fundamentals
 
microprocessor
microprocessormicroprocessor
microprocessor
 
Economic development
Economic developmentEconomic development
Economic development
 
Gsm architecture
Gsm architectureGsm architecture
Gsm architecture
 
Gprs persentation
Gprs persentation Gprs persentation
Gprs persentation
 
System software
System softwareSystem software
System software
 
3G communication
3G communication3G communication
3G communication
 
Renewable Energy
Renewable EnergyRenewable Energy
Renewable Energy
 

Kürzlich hochgeladen

guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssNadaMohammed714321
 
NBA power point presentation final copy y
NBA power point presentation final copy yNBA power point presentation final copy y
NBA power point presentation final copy ysrajece
 
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster1508 A/S
 
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisFW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisPeclers Paris
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptJIT KUMAR GUPTA
 
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Associazione Digital Days
 
CAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfCAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfAlasAlthaher
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppNadaMohammed714321
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyChristopher Totten
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppNadaMohammed714321
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine CharlottePulte
 
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbworld health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbpreetirao780
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssNadaMohammed714321
 
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道yrolcks
 
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinSamar Hossam ElDin Ahmed
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxKevinYaelJimnezSanti
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designersPixeldarts
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...Rishabh Aryan
 
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxUnit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxNitish292041
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 

Kürzlich hochgeladen (20)

guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssss
 
NBA power point presentation final copy y
NBA power point presentation final copy yNBA power point presentation final copy y
NBA power point presentation final copy y
 
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
 
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisFW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
 
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
 
CAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfCAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdf
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 ppppppppppppppp
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenology
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 ppppppppppppppp
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine
 
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbworld health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbb
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssss
 
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
 
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptx
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
 
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxUnit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 

UI Analysis and Design

  • 1. User Interface Analysis and Design Sumit Singh User Interface Designer Infosys Ltd
  • 2. User Interface Analysis and Design User Interface (UI) Design focuses on anticipating what users might need to do. Design of websites, computers, appliances, machines, mobile communication devices, and software applications with the focus on the user's experience and interaction UI brings together concepts from interaction design, visual design, and information architecture. UI design is the process of taking the way a machine works and translating it into the way a person thinks. Everything stems from knowing your users, including understanding their goals, skills, preferences, and tendencies.
  • 3. Why to choose This career Answer My Question: ASK ALL THESE QUESTION TO YOUR SELF 1. Are you perfect in coding as per company requirement? 2. You are ready to learn programming language java, c, c++ etc? 3. Are you creative person? 4. You like to designing , art work etc? 5. If you like will you know as a engineer what are the career path for you? Now if you like to go with this career: 1. What skill is needed. 2. Define Career Path. 3. Any training required. 4. How I can approach company for this job. 5. Any Scope of higher studies. ASK ALL THESE QUESTION TO ME
  • 4. Skill Needed Are you aware about essential front-end web development languages. – HTML, CSS, JavaScript. Understanding skilled in modern web and application programming skills – JAVA, PHP etc. Utilize Adobe Creative Suite programs (Basic Knowledge) - Photoshop, Illustrator, Flash & Flex to mockup and design UI elements. Understanding responsive web design to create user interfaces. Conduct usability testing to identify and fix UI problems, and gather real-world intelligence from their target market. Utilize social networking APIs (from Facebook, Twitter, Google+, LinkedIn, Pinterest, etc.) to integrate social actions. Collaborate with business and IT decision makers to discuss user interface requirements and brainstorm UI ideas. Keep current with the latest trends and best practices of UI/UX design and HCI (human-computer interaction). verbal and written communication, team leadership and project management, to effectively communicate with business decision-makers
  • 5. Human Centered Design Human centered design as “an approach to systems design and development that aims to make interactive systems more usable by focusing on the use of the system and applying human factors/ergonomics and usability knowledge and techniques A growing set of human centered design tools are used for simulating intuitions, opportunities and possible futures for purposes of emersion, reflection and discussion.
  • 6. Goal: Present a formal and methodological approach for the specification of user interfaces integrated in the software development process. Object-Oriented approach which covers the phases of ImplementationDesignAnalysis User Interface Model: 1) Task Model 2) User Model 3) Domain Model 4) Dialog Model 5) Presentation Model * Model-Based Code Generation Models of Design * Object-Oriented Specification Language OASIS-UI
  • 7. Advantages of the Model-Based approach: User-centered development process. Centralised UI specification. Design tools for an interactive and automated development. UI design reuse.
  • 8. Good and bad design • What is wrong with the remote on the right? • Why is the TiVo remote so much better designed? – Peanut shaped to fit in hand – Logical layout and color- coded, distinctive buttons – Easy to locate buttons
  • 9. Interaction Design Concept/understanding how one/individual interacts with an entity and how to design the process of interaction of that individual with the entity. that entity can be anything you pick it to be, for example your car, or your toaster, web browser and website that you view in a browser. What does an Interaction Designer do? An interaction designer is a key player throughout the entire development process. They will typically perform the following activities as part of a project team:
  • 10. Interaction Design • Need to take into account: – Who the users are – What activities are being carried out – Where the interaction is taking place • Need to optimize the interactions users have with a product – So that they match the users’ activities and needs What to design
  • 12. 12 Keypad numbers layout • A case of external inconsistency 1 2 3 4 5 6 7 8 9 7 8 9 1 2 3 4 5 6 0 0 (a) phones, remote controls (b) calculators, computer keypads
  • 13. Key points • Interaction design is concerned with designing interactive products to support the way people communicate and interact in their everyday and working lives • It is concerned with how to create quality user experiences • It requires taking into account a number of interdependent factors, including context of use, type of activities, cultural differences, and user groups • It is multidisciplinary, involving many inputs from wide-reaching disciplines and fields
  • 14. User Interface Analysis and Design Interface design focuses on the following • The design of interfaces between software components • The design of interfaces between the software and other nonhuman producers and consumers of information • The design of the interface between a human and the computer User interface analysis and design has to do with the study of people and how they relate to technology Spiral Process
  • 15. Interface analysis (user, task, and environment analysis) Focuses on the profile of the users who will interact with the system. Concentrates on users, tasks, content and work environment . Studies different models of system function (as perceived from the outside). Delineates the human- and computer-oriented tasks that are required to achieve system function. Interface design Defines a set of interface objects and actions (and their screen representations) that enable a user to perform all defined tasks in a manner that meets every usability goal defined for the system. Interface construction Begins with a prototype that enables usage scenarios to be evaluated. Continues with development tools to complete the construction. Interface validation, focuses on The ability of the interface to implement every user task correctly, to accommodate all task variations, and to achieve all general user requirements. The degree to which the interface is easy to use and easy to learn. The users' acceptance of the interface as a useful tool in their work. Spiral Process
  • 16. User Control Define interaction modes in a way that does not force a user into unnecessary or undesired actions The user shall be able to enter and exit a mode with little or no effort (e.g., spell check  edit text  spell check) Provide for flexible interaction The user shall be able to perform the same action via keyboard commands, mouse movement, or voice recognition Allow user interaction to be interruptible and ‘’undo“ able
  • 17. Hide technical internals from the casual user
  • 18. Design for direct interaction with objects that appear on the screen
  • 19. Reduce demand on short-term memory
  • 21. Define shortcuts that are intuitive
  • 22. The visual layout of the interface should be based on a real world metaphor
  • 23. Disclose information in a progressive fashion
  • 24. Allow the user to put the current task into a meaningful context
  • 25. Maintain consistency across a family of applications
  • 26. If past interactive models have created user expectations, do not make changes unless there is a compelling reason to do so
  • 27. User Analysis Questions 1) Are the users trained professionals, technicians, clerical or manufacturing workers? 2) What level of formal education does the average user have? 3) Are the users capable of learning on their own from written materials or have they expressed a desire for classroom training? 4) Are the users expert typists or are they keyboard phobic? 5) What is the age range of the user community? 6) Will the users be represented predominately by one gender? 7) How are users compensated for the work they perform or are they volunteers? 8) Do users work normal office hours, or do they work whenever the job is required? 9) Is the software to be an integral part of the work users do, or will it be used only occasionally? 10) What is the primary spoken language among users? 11) What are the consequences if a user makes a mistake using the system? 12) Are users experts in the subject matter that is addressed by the system? 13) Do users want to know about the technology that sits behind the interface? 27
  • 28. Introduction • User interface design is an iterative process, where each iteration elaborate and refines the information developed in the preceding step • General steps for user interface design 1) Using information developed during user interface analysis, define user interface objects and actions (operations) 2) Define events (user actions) that will cause the state of the user interface to change; model this behavior 3) Depict each interface state as it will actually look to the end user 4) Indicate how the user interprets the state of the system from information provided through the interface • During all of these steps, the designer must – Always follow the three golden rules of user interfaces. – Model how the interface will be implemented. – Consider the computing environment (e.g., display technology, operating system, development tools) that will be used. 28
  • 29. Guidelines for Error Messages • The message should describe the problem in plain language that a typical user can understand • The message should provide constructive advice for recovering from the error • The message should indicate any negative consequences of the error (e.g., potentially corrupted data files) so that the user can check to ensure that they have not occurred (or correct them if they have) • The message should be accompanied by an audible or visual cue such as a beep, momentary flashing, or a special error color • The message should be non-judgmental – The message should never place blame on the user 29 An effective error message philosophy can do much to improve the quality of an interactive system and will significantly reduce user frustration when problems do occur
  • 30. Questions for Menu Labeling and Typed Commands • Will every menu option have a corresponding command? • What form will a command take? A control sequence? A function key? A typed word? • How difficult will it be to learn and remember the commands? • What can be done if a command is forgotten? • Can commands be customized or abbreviated by the user? • Are menu labels self-explanatory within the context of the interface? • Are submenus consistent with the function implied by a master menu item? 30
  • 31. Design and Prototype Evaluation • Before prototyping occurs, a number of evaluation criteria can be applied during design reviews to the design model itself – The amount of learning required by the users • Derived from the length and complexity of the written specification and its interfaces – The interaction time and overall efficiency • Derived from the number of user tasks specified and the average number of actions per task – The memory load on users • Derived from the number of actions, tasks, and system states – The complexity of the interface and the degree to which it will be accepted by the user • Derived from the interface style, help facilities, and error handling procedures 31(More on next slide)
  • 32. Design and Prototype Evaluation (continued) • Prototype evaluation can range from an informal test drive to a formally designed study using statistical methods and questionnaires • The prototype evaluation cycle consists of prototype creation followed by user evaluation and back to prototype modification until all user issues are resolved • The prototype is evaluated for – Satisfaction of user requirements – Conformance to the three golden rules of user interface design – Reconciliation of the four models of a user interface 32
  • 33. UI design principles ● UI design must take account of the needs, experience and capabilities of the system users. ● Designers should be aware of people’s physical and mental limitations (e.g. limited short-term memory) and should recognize that people make mistakes. ● UI design principles underlie interface designs although not all principles are applicable to all designs. ● Recoverability • The system should provide some resilience to user errors and allow the user to recover from errors. This might include an undo facility, confirmation of destructive actions, 'soft' deletes, etc. ● User guidance • Some user guidance such as help systems, on-line manuals, etc. should be supplied ● User diversity • Interaction facilities for different types of user should be supported. For example, some users have seeing difficulties and so larger text should be available