User Interface Design
User Centred Design and principles, Iterative Design, User research, Building Personas, Design studio method, Prototyping basics and tools, Paper prototyping, Usability testing
The terms UI and UX (design) are very often and
used as a single term by many people or designers.
The first thing we need to know straight is that UI
and UX are not the same.
Design is a rather broad and huge term. When
someone says “I’m a designer,” it is not that clear
what they actually do. There are a number of
different responsibilities term designer. There are
many aspects of design now a days.
The presentation I used in the two sessions I did on introduction to UI/UX Engineering for undergraduate students in the Vavuniya Campus of the University of Jaffna and the Trincomalee Campus, Eastern University.
A word “design” has a very broad meaning and is used in nearly every business or industry. We always have an intuitive awareness of what this is about though. But when we talk about UX and UI design terms, everything is getting a lot more complicated.
What is UI UX design? Is it a generic term? Or UX and UI are two separate concepts? If they are autonomous notions, so why are they always used together? In this article I want to answer all your questions concerning this topic.
https://spdload.com/blog/ux-vs-ui-design/
I made this with my 3 partners for my CEC marks in 3rd sem of MCA. It includes information about HCI, definition, types, how it works, queries of it etc.
One can get idea easily about HCI after refering this presentation.
User Interface Design
User Centred Design and principles, Iterative Design, User research, Building Personas, Design studio method, Prototyping basics and tools, Paper prototyping, Usability testing
The terms UI and UX (design) are very often and
used as a single term by many people or designers.
The first thing we need to know straight is that UI
and UX are not the same.
Design is a rather broad and huge term. When
someone says “I’m a designer,” it is not that clear
what they actually do. There are a number of
different responsibilities term designer. There are
many aspects of design now a days.
The presentation I used in the two sessions I did on introduction to UI/UX Engineering for undergraduate students in the Vavuniya Campus of the University of Jaffna and the Trincomalee Campus, Eastern University.
A word “design” has a very broad meaning and is used in nearly every business or industry. We always have an intuitive awareness of what this is about though. But when we talk about UX and UI design terms, everything is getting a lot more complicated.
What is UI UX design? Is it a generic term? Or UX and UI are two separate concepts? If they are autonomous notions, so why are they always used together? In this article I want to answer all your questions concerning this topic.
https://spdload.com/blog/ux-vs-ui-design/
I made this with my 3 partners for my CEC marks in 3rd sem of MCA. It includes information about HCI, definition, types, how it works, queries of it etc.
One can get idea easily about HCI after refering this presentation.
A presentation on UX Experience Design: Processes and Strategy by Dr Khong Chee Weng from Multimedia University at the UX Indonesia-Malaysia 2014 that was conducted on the 26th April 2014 in the Hotel Bidakara, Jakarta, Indonesia.
System users often judge a system by its interface rather than its functionality
A poorly designed interface can cause a user to make catastrophic errors
Design and its fundamental process have changed with time, growing challenges among the users, devices and different platforms for UI and UX process.
In Design Fundamentals, a day-long thorough workshop, we will try to understand the fundamentals of UI and UX process, and follow the standard process and approaches to create a user-centric design. With basic Design Principles as the the backbone for our design, of course!
User interface and user experience ui ux design basicsRavi Bhadauria
In this video there is a complete description for what are the basics needed for UI as well as UX. To learn these from an institute, then join ADMEC Multimedia Institute.
We’ve all had discussions about the great ‘UX’ of a product, or the poor ‘UI’ of a website. Is it a secret language you will never be lucky to know more about it?
Actually, it is very simple, For example: While User Experience is a bunch of tasks focused on optimization of a product for effective and enjoyable use; User Interface Design is its complement, the look and spirit, the presentation and interactivity of a product.
This presentation covers fundamentals of user interface design and how they’re used to build a simple interface element. It’s been tailored for people who had minimal or no exposure to design, but would like to learn the basics.
Lecture 7 Software Engineering and Design User Interface Design op205
3F6 Software Engineering and Design, February 2012, lecture slides 7, User Interface Design, Dr Elena Punskaya, Cambridge University Engineering Department
A presentation on UX Experience Design: Processes and Strategy by Dr Khong Chee Weng from Multimedia University at the UX Indonesia-Malaysia 2014 that was conducted on the 26th April 2014 in the Hotel Bidakara, Jakarta, Indonesia.
System users often judge a system by its interface rather than its functionality
A poorly designed interface can cause a user to make catastrophic errors
Design and its fundamental process have changed with time, growing challenges among the users, devices and different platforms for UI and UX process.
In Design Fundamentals, a day-long thorough workshop, we will try to understand the fundamentals of UI and UX process, and follow the standard process and approaches to create a user-centric design. With basic Design Principles as the the backbone for our design, of course!
User interface and user experience ui ux design basicsRavi Bhadauria
In this video there is a complete description for what are the basics needed for UI as well as UX. To learn these from an institute, then join ADMEC Multimedia Institute.
We’ve all had discussions about the great ‘UX’ of a product, or the poor ‘UI’ of a website. Is it a secret language you will never be lucky to know more about it?
Actually, it is very simple, For example: While User Experience is a bunch of tasks focused on optimization of a product for effective and enjoyable use; User Interface Design is its complement, the look and spirit, the presentation and interactivity of a product.
This presentation covers fundamentals of user interface design and how they’re used to build a simple interface element. It’s been tailored for people who had minimal or no exposure to design, but would like to learn the basics.
Lecture 7 Software Engineering and Design User Interface Design op205
3F6 Software Engineering and Design, February 2012, lecture slides 7, User Interface Design, Dr Elena Punskaya, Cambridge University Engineering Department
User Interface Design: Definitions, Processes and PrinciplesMoodLabs
An introduction to User Interface Design, often called UX / UI. Presented by David Little, User Interface Designer, DDH from King's College London Digital Humanities program.
UXPA 2023: UX Fracking: Using Mixed Methods to Extract Hidden InsightsUXPA International
Users do not always accurately describe what they mean or feel. There are many reasons for this, ranging from politeness to poor introspection, to lack of sufficient technical vocabulary. Fortunately, UX researchers have tools in their trade to deduce what was really meant. We call this UX Fracking, a mixed methods approach that is optimized for extracting hidden user insights. We will illustrate the dangers of inadequate, superficial research, and how this may lead to outcomes incapable of addressing the users’ core issues. We will explore ways to avoid these pitfalls by leveraging mixed research methods to test hypotheses about the users’ intent and needs. This starts with a thorough understanding of who the user is, their goals, and how they work today, to an approach that combines surveys, interviews, and comment analysis with behavioral observation, and finally, validating the newly discovered user insights with the users themselves.
Slides Ian Multon recently used in his discussion w/ mentees of The Product Mentor.
The Product Mentor is a program designed to pair Product Mentors and Mentees from around the World, across all industries, from start-up to enterprise, guided by the fundamental goals…Better Decisions. Better Products. Better Product People.
Throughout the program, each mentor leads a conversation in an area of their expertise that is live streamed and available to both mentee and the broader product community.
http://TheProductMentor.com
Julie Grundy gives an overview of user experience Design, why it's important, guiding principles, UX research overview, and tactics used by UX professionals. November 2015.
User experience (UX) is the basis for all Web activity, and thus underpins everything we do in Web design and development. Successful projects bake UX in from the ground up, from discovery through planning, iteration, testing and deployment. No matter how beautiful our code may be, of what use is it if it’s irrelevant to our users?
Siblings or Step Siblings? Common Connections Between Technical Communication...Chris LaRoche
The most recent version of a presentation to a technical communication audience describing the increasing connections and merging of the technical communication and UX/Usability professions.
Ethnobotany and Ethnopharmacology:
Ethnobotany in herbal drug evaluation,
Impact of Ethnobotany in traditional medicine,
New development in herbals,
Bio-prospecting tools for drug discovery,
Role of Ethnopharmacology in drug evaluation,
Reverse Pharmacology.
How to Split Bills in the Odoo 17 POS ModuleCeline George
Bills have a main role in point of sale procedure. It will help to track sales, handling payments and giving receipts to customers. Bill splitting also has an important role in POS. For example, If some friends come together for dinner and if they want to divide the bill then it is possible by POS bill splitting. This slide will show how to split bills in odoo 17 POS.
How to Create Map Views in the Odoo 17 ERPCeline George
The map views are useful for providing a geographical representation of data. They allow users to visualize and analyze the data in a more intuitive manner.
We all have good and bad thoughts from time to time and situation to situation. We are bombarded daily with spiraling thoughts(both negative and positive) creating all-consuming feel , making us difficult to manage with associated suffering. Good thoughts are like our Mob Signal (Positive thought) amidst noise(negative thought) in the atmosphere. Negative thoughts like noise outweigh positive thoughts. These thoughts often create unwanted confusion, trouble, stress and frustration in our mind as well as chaos in our physical world. Negative thoughts are also known as “distorted thinking”.
This is a presentation by Dada Robert in a Your Skill Boost masterclass organised by the Excellence Foundation for South Sudan (EFSS) on Saturday, the 25th and Sunday, the 26th of May 2024.
He discussed the concept of quality improvement, emphasizing its applicability to various aspects of life, including personal, project, and program improvements. He defined quality as doing the right thing at the right time in the right way to achieve the best possible results and discussed the concept of the "gap" between what we know and what we do, and how this gap represents the areas we need to improve. He explained the scientific approach to quality improvement, which involves systematic performance analysis, testing and learning, and implementing change ideas. He also highlighted the importance of client focus and a team approach to quality improvement.
The French Revolution, which began in 1789, was a period of radical social and political upheaval in France. It marked the decline of absolute monarchies, the rise of secular and democratic republics, and the eventual rise of Napoleon Bonaparte. This revolutionary period is crucial in understanding the transition from feudalism to modernity in Europe.
For more information, visit-www.vavaclasses.com
Synthetic Fiber Construction in lab .pptxPavel ( NSTU)
Synthetic fiber production is a fascinating and complex field that blends chemistry, engineering, and environmental science. By understanding these aspects, students can gain a comprehensive view of synthetic fiber production, its impact on society and the environment, and the potential for future innovations. Synthetic fibers play a crucial role in modern society, impacting various aspects of daily life, industry, and the environment. ynthetic fibers are integral to modern life, offering a range of benefits from cost-effectiveness and versatility to innovative applications and performance characteristics. While they pose environmental challenges, ongoing research and development aim to create more sustainable and eco-friendly alternatives. Understanding the importance of synthetic fibers helps in appreciating their role in the economy, industry, and daily life, while also emphasizing the need for sustainable practices and innovation.
3. 1. DEFINITIONS
• What is a user interface?
“That part of a computer system with which a user interacts in
order to undertake her tasks and achieve her goals.”
(Stone, Jarrett et. al., 2001)
• What we interact with when we use any kind of digital
hardware or software.
10. WHERE THE UI FITS
• Back-end infrastructure: servers, databases and
programming.
• Content (i.e. words and pictures).
• Information architecture: how the content is organised and
navigated.
• User interface: where the user interacts with the above.
11. USER INTERFACE DESIGN
“[Interaction design] is concerned with describing user
behavior and defining how the system will accommodate and
respond to that behavior"
(Jesse James Garrett, 2011)
• Research into the behaviours and goals of the target
users of a digital product or service.
PLUS
• The design of appropriate tools (interfaces) which enable
users to achieve their goals.
12. !
• Design without research is guesswork.
• Or may result in an interface which reflects the
understanding (mental model) of a product’s programmers
or architects, not its users.
UI design should be thought of as:
• A process integral to the creation of digital products.
• A group of interrelated activities.
• A mindset.
13. THE CONTEXT OF UI DESIGN
• Sits within a larger set of disciplines, all ultimately
concerned with the interaction of people with machines.
• Labels can be confusing and describe overlapping
activities and processes which may be carried out by one
or a number of people.
• Interaction Design (IXD) and UI design: subtle differences
in definition but will be used interchangeably in this
lecture.
14. USER EXPERIENCE (UX) DESIGN
• Commonplace term in software design and beyond.
• A vague term: which part of a digital product isn’t
experienced by users?
• Totality of users’ experiences of a product or service, from
its content, navigation, aesthetics, interactions or even
how quickly it performs or responds to users’ interactions.
• Umbrella term for a number of more defined disciplines.
16. HUMAN-COMPUTER INTERACTION
(HCI)
• Academic study of the interaction between humans and
machines.
• Computer science, psychology, linguistics, sociology,
anthropology.
• Popularised in the 1980s but with roots in older fields of
ergonomics and human factors: 1900s and earlier.
• UI design can be thought of as the practical
implementation of HCI research, methods and practices.
17. 2. USER-CENTRED DESIGN (UCD)
• The “U” in UI: USER; the “H” in HCI: HUMAN
“Focus on the user and all else will follow.”
(Google)
• Focus on: people, their motivations, goals and
behaviours.
• Must be aware of technological constraints but UI design
is not a technological process.
19. RESEARCH
• Who are the users?
• How many different types of user are there?
• What do they want to be able to do?
• How do they currently do it?
• Where do they currently do it?
• Where might they want to be able to do it?
• How might they want to be able to do it?
20. USER GOALS, STRATEGIC GOALS
AND CONSTRAINTS
• What are the strategic goals (“business goals”) of the
product you are creating; what were you funded to do?
• Tensions between strategic goals and user goals: how will
this be managed?
• What constraints do you have:
• Financial
• Time
• Technology
• People
21. USER RESEARCH
• How do you find users?
• An existing user base.
• An organisation’s own information (e.g. marketing, focus groups,
audience profiles): what are they willing to share?
• Academic projects: project team contacts and knowledge.
• If you have limited resources?
• Friends, family, colleagues.
• Mailing lists.
• Social media.
22. ENGAGING WITH USERS:
INTERVIEWS
• Need to be pragmatic: what are your constraints
(time, financial). User research takes time and you may need to
recompense people for their time.
• If you have time: face-to-face, one-to-one interviews in user’s
“natural environment”: ethnography or contextual enquiry.
• Observe users: how they work, their behaviours, what other
resources they use.
• What users do and what they say they actually do may well be
different (c.f. Jakob Nielsen’s First Rule of Usability).
• Unstated goals, domain language.
23. ENGAGING WITH USERS: OTHER
METHODS
• Interviews via Skype or Email.
• Online surveys (generally better for quantitative
information).
• Existing published information about user behaviours.
24. WHAT TO ASK
• What kind of information: qualitative or quantitative
information? At initial stages of research qualitative
information may be more useful.
• Ask non-judgmental and non-leading questions.
• Don’t ask questions that are too open-ended (what is of
relevance to the project given its constraints?)
• For more information:
• Box and Bowles, Undercover User Experience Design (2010)
• Kuniavsky, Observing the User Experience: A Practitioner's Guide
to User Research (2003).
25. ANALYSIS AND CONCEPTUAL
DESIGN
• Analysis will probably take a lot of time!
• Identify trends: what are user goals and how can these be
supported—identify by analysing interests and
behaviours, stated and unstated goals.
• Use information to create high-level documentation to guide the
design, e.g. user stories (statement of user goals by user
group) or personas (more in-depth descriptions of “typical”
users).
• Conceptual design documentation—wireframes.
26. DELIVERABLES
• User stories: simple statements of overall user goals.
• As a <type of user> I want <a goal> so that <some
reason>:
• As an academic historian I want to be able to track ownership and
descent of manorial properties (to support my research).
• As a genealogist I want to be able to be able to establish family
relationships of the families I am researching so that I can use the
information to construct a family history.
• Sketches and wireframes: at this stage a point of
discussion with other stakeholders.
27.
28.
29. PROTOTYPING AND TESTING
• Prototyping: creation of artefacts for testing with users:
can be low-fidelity (e.g. paper-based), medium fidelity
(e.g. wireframes, static coded web pages) or high fidelity
(e.g. functional web pages).
• Feedback from testing the prototypes can be fed back into
further iterations of the design.
• Resource intensive but much easier (and cheaper) to
address issues and fix usability problems early in the
process than later.
30. COST BENEFIT
“The rule of thumb in many usability-aware organizations is
that the cost-benefit ratio for usability is $1:$10-$100. Once a
system is in development, correcting a problem costs 10
times as much as fixing the same problem in design. If the
system has been released, it costs 100 times as much relative
to fixing in design.”
T. Gilb (1998) quoted on the Usability Professionals
Association (UPA) website.
31. USABILITY TESTING
• Usability
“The extent to which a product can be used by specified users to
achieve specified goals with effectiveness, efficiency and satisfaction
in a specified context of use.”
International Organization for Standardization (ISO): ISO 9241-11
• Doesn’t require a lab or expensive equipment.
• One-to-one testing of a prototype with a user. A facilitator gives a
participant a number of tasks to work through on the interface and asks
them to “think aloud” their decisions.
• Make notes on the user’s behaviour and, if possible, use screen
recording software to record the user’s decisions, voice and facial
expression.
32. ITERATIVE DESIGN
• Analyse results of testing and feed back into design
• Don’t need many participants to identify main usability problems
(around four should be fine).
• Steve Krug: short, accessible books on running usability testing: Don’t
Make Me Think! and Rocket Surgery Made Easy.
• How many tests should you run? It depends. Usually defined by
project constraints (unless you’re Google who once famously tested
41 shades of blue to see which performed better!).
• Remote usability testing software: an alternative to running face-to-
face tests, but usually better for gathering quantitative information.
33. UCD: SUMMARY
• A mindset: gives a voice to the user throughout the design
and build process.
• Iterative: design, test, design, test etc.
• Be pragmatic. You will always have constraints.
• One round of testing is better than none.
• Testing one user is 100% better than testing none (but
more is better!).
35. 3.1 SIMPLICITY
• A user interface should be kept as simple as possible for
users in order that they can achieve their goals.
• What is simplicity? The simplest interface for the job, but
no simpler!
• Which is simpler?
36.
37.
38. SIMPLICITY
• Depends on context of use.
• What is the purpose of your product?
• What do your users want to do?
• Keep to your core functionality
39. 3.2. STRUCTURE
• Ensure that the interface is clearly laid out, well organised
and controls are easily identifiable.
• “Gestalt laws of perception”:
• Proximity. When elements are grouped together, people perceive
them as being related.
• Similarity. Elements that look similar are perceived as being
related.
• Closure. As humans we are generally quite good at filling in
missing information and this is certainly the case in perception. We
fill in the blanks with “incomplete” images. Commonly used in logo
design etc.
45. 3.3. VISIBILITY
• Visibility can be thought as ensuring that interface controls
that need to be accessed by the user are as visible as
possible.
• It ties in with the idea of “affordance”, popularised by the
design thinker and writer Don Norman:
“The perceived and actual properties of the thing, primarily
those fundamental properties that determine just how the thing
could possibly be used.”
(Don Norman, 1988)
46. • Affordance: “this is for doing that”.
Underlined text on a web page is for clicking
48. • Conform to established rules.
• Use of appropriate metaphors can also promote visibility.
Sometimes metaphors come from a pre-existing
technology, e.g.:
The Gmail icon: resembles a “traditional” envelope
• At its most extreme this can result in “skeuomorphism”:
incorporating elements in the UI from a previous technology
that serve no purpose other than being decorative.
49. Apple’s Podcast app: features an emulated
tape mechanism.
“Real-world” UI metaphors most successful
when they allow users to easily form
connections between the interface and
existing technologies.
What does a tape mechanism mean for
younger users?
50. 3.4. CONSISTENCY
• “People see what they expect to see.”
• Recognition over recall.
• Consistency across a product or set of products.
51. 3.5. TOLERANCE
• Well designed software should try to prevent users from
making errors in the first place but is inevitable that
mistakes will happen. A tolerant UI is a forgiving UI and
lets users recover from mistakes they have made.
• Mistakes may take many forms, e.g. an accidentally
discarded email draft, a formatting mistake in a Word
processor or an incorrectly filled form field.
52. Tolerant: the colour picker in Photoshop: only allows me to enter six digits for a
hex colour code (red, green and blue number pairs).
53. Intolerant: the colour picker in Illustrator: allows me to enter more
than six digits and then presents me with an annoying error
message (also note the inconsistency across products).
54. 3.6. FEEDBACK
• How the UI communicates with the user after she has
carried out an interaction.
• Feedback may be visual, auditory or even haptic (that is
communicated via touch):
• The success message that appears after a web form has been
submitted.
• The whooshing sounds as an SMS is sent from an iPhone.
• The sense of a Wii controller vibrating when simulating a machine
gun being fired on Call of Duty.
55. NIELSEN’S HEURISTICS
• Jakob Nielsen’s ten heuristics (guidelines!) for creating usable
interfaces (1999):
• Visibility of system status
• Match between system and the real world
• User control and freedom
• Consistency and standards
• Error prevention
• Recognition rather than recall
• Flexibility and efficiency of use
• Aesthetic and minimalist design
• Help users recognise, diagnose and recover from errors
• Help and documentation
http://www.useit.com/papers/heuristic/heuristic_list.html
56. 4. WHY YOU SHOULD CARE
4.1 Finance
4.2 Impact
4.3 Ethics
57. 4.1 FINANCE
• Cost savings of usability testing.
• For commercial organisations, greater usability leads to
increased sales and greater competitive advantage.
• For non-profits, “conversion rates” (e.g. transforming a
casual user to a signed-up and engaged user) are still
important: a resource that addresses the needs of its
users is more likely to lead to greater use and (repeated)
engagement.
• Justify the use of limited funds.
• Reduce support costs.
58. 4.2 IMPACT
• Increased user engagement in design can lead to more
user-focused resources which in turn can increase a
resource’s impact.
• Old Bailey Online:
• JISC funded user engagement exercise: resource was not being
well-used by academic community.
• Study resulted in creation of sets of tools aimed at teachers and
researchers.
• Impact important consideration when creating funding
applications.
• Toolkits for measuring impact of digital resources, e.g.
TIDSR: Toolkit for the Impact of Digitised Scholarly
Resources (Oxford Internet Institute).
59. 4.3 ETHICS
• All resources have users or potential users.
• Users may battle with a difficult UI if your resource is
unique enough but why should they?
• Jef Raskin, The Humane Interface (2000): laws of
interface design:
• A computer shall not harm your work or, through inactivity, allow
your work to come to harm.
• A computer shall not waste your time or require you to do more
work than is strictly necessary.
60. FINALLY
• There are plenty of terrible user experiences
already, don’t add to them.
• Engage with users and follow established design
processes and principles.
• Start noticing the good and bad user experiences you
encounter every day.
66. DESIGN EXERCISE
• Suggest up to three changes to the CCED search screen
which would assist amateur local historians.
• 5-10 minutes: familiarise yourself with the brief.
• Maximum 25 minutes on the design: sketch!
• 5 minutes: prepare to present.
• 2-3 minutes per group: present your ideas.
• No right or wrong answers.