Download presentation
Presentation is loading. Please wait.
Published byGladys Long Modified over 5 years ago
1
SE365 SW aspects of the Human Computer Interaction IS 336 User Interface Design & Implementation
Basit Qureshi
2
About! What is this course What would you learn
Course Specs & assessments What is expected from you Preamble!
3
What is this course?
4
What is this course SE365 Human Computer Interaction
IS 336 User Interface Design & Implementation
5
Human-Computer Interaction (HCI)
the end-user of a program the others they work or communicate with Computer the machine program runs on split between clients & servers Interaction user tells the computer what they want computer communicates results So far you have probably studied lots about Computers, but little about Humans and Interaction. This course will concentrate on how these three areas come together.
6
Part of application that allows people
User Interfaces (UIs) Part of application that allows people to interact with computer to carry out their task User vs. Customer vs. Client user is a term only used by 2 industries bad! customer – person who will use the product you build client – the company who is paying you to build it HCI = design, prototyping, evaluation, & implementation of UIs
7
What would you learn?
8
What would you learn Course Description: Introduction to the concepts underlying the design of human-computer interaction: usability, direct manipulation, systematic design methods, user conceptual models and interface metaphors, design languages and genres, human cognitive and physical ergonomics, information and interactivity structures, design tools and environments. This course teaches how HCI affects the overall design of interfaces. The course covers four major parts: the foundation, the design process, models and theories, and thinking outside the box.
9
Course Learning Outcomes
Course Learning Outcomes CLO1: Describe many factors and concepts that take into place when designing usable interactive computer systems. CLO2: Recognize human factors, need and issues in user interaction design. CLO3: Apply user-centered approach to interaction design by following guidelines, design rules and principles. CLO4: Evaluate user interfaces by conducting usability testing and other evaluation methods. CLO5: Build a group project incorporating user centered design approach.
10
HCI Approach to UI Design
Give Examples of Tasks/Activities: activity: learning history high level taskl: - writing a paper - drawing a picture low level task (operation): - copying a word from one paragraph to another - coloring a line “People change their knowledge as they perform, i.e., they learn”
11
Specs & Assessments
12
Specs & Assessments Text
13
Specs & Assessments Resources Website: Others:
info.psu.edu.sa/psu/cis/biq/hci LMS Others: Lectures, Notes, Links, Videos, Projects submissions
14
Specs & Assessments Assessments Exams: 50% Projects: 40%
10% = Major (Week 5) 40% = Final Projects: 40% Dry assignment(1) 5% (week 3) 4 Step assignments 35% (part of project) Activities: 10% 1 point each (10 activities)
15
Specs & Assessments Content: topics List Week Topic 1-3
Fundamental Concepts 4-6 Plan Requirements Gathering 7-11 Story boarding Prototyping 12-13 Design Principles 14-15 Evaluation & Reflection
16
What is expected from you?
18
With Flipped Class Approach
19
Commitment Reading: 1-2 hrs per week Browsing: 1-2 hrs per week
Interviewing/recording: 1-2 hrs per week Trying & Testing: 1-3 hrs (during projects)
20
Some slides have been heavily influenced or embedded within based on Prof. James Stanford University slides for course given in 2018 Preamble!
21
Hall of Fame or Shame? Page setup for printing in IE5
22
Page setup for printing in IE5
Hall of Shame! Page setup for printing in IE5 Page preview nice, but Problems codes for header & footer information requires recall! want recognition no equivalent GUI help is the way to find out, but not obvious
23
Later Versions of IE Fix This
What is the tradeoff of this new design?
24
Asiana Airlines interface for sending email or SMS from plane
Hall of Fame or Shame? Asiana Airlines interface for sending or SMS from plane
25
Hall of Shame! Asiana Airlines interface for sending or SMS from plane Cool, but text entry using this input device is tedious crashes often Lost the strong brand value for me
26
weather.com Hall of Fame or Shame? Weather.com
What is the user trying to do (most commonly) when coming to this site? What is the FIRST THINGS your eye is drawn to? (called the “first read”)
27
what is the “first read”?
Hall of Shame! weather.com what is the “first read”? videos advertisements not weather! Weather.com What is the user trying to do (most commonly) when coming to this site? What is the FIRST THINGS your eye is drawn to? (called the “first read”)
28
Hall of Fame or Shame? bing.com/weather
A friend from MS said, try the new Bing Weather! Better… but?
29
Hall of Fame! bing.com/weather good! bad! less clutter
eye drawn to current weather bad! feels boring A friend from MS said, try the new Bing Weather! Better… but?
30
Hall of Fame or Shame? weather.yahoo.com Better How? But still?
31
Hall of Fame! weather.yahoo.com good! bad! aesthetic
clean typography & icons bad! image is 1st read A friend from MS said, try the new Bing Weather! Better… but?
32
Hall of Fame! iOS yahoo weather
A friend from MS said, try the new Bing Weather! Better… but?
33
Hall of Fame! iOS yahoo weather good! aesthetic
clean typography & icons image recedes to background w/ flick A friend from MS said, try the new Bing Weather! Better… but?
34
Major part of work for “real” programs Bad user interfaces cost
Why is HCI Important? Major part of work for “real” programs approximately 50% Bad user interfaces cost money 5% satisfaction up to 85%profits finding problems early makes them easier to fix reputation of organization (e.g., brand loyalty) lives (Therac-25) User interfaces hard to get right people are unpredictable intuition of designers often wrong Studies have shown that the design, programming, and evaluation of the UI can take up to 50% of the project time and cost for a wide range of commercial and in-house software Nearly 25% of all applications projects fail. Why? overrun budgets & management pulls plug others complete, but are too hard to learn/use Solution is user-centered design. Why? easier to learn & use products sell better can help keep a product on schedule finding problems early makes them easier to fix! training costs reduced
35
Who Creates UIs? A team of specialists (ideally) graphic designers
interaction / interface designers information architects technical writers marketers program managers test engineers usability engineers researchers (ethnographers, etc.) software engineers hardware engineers industrial designers customers In this course you will wear the hats of many of these specialists.
36
How to Design and Build Good UIs
UI Development process Usability goals User-centered design Design discovery Rapid prototyping Evaluation Programming
37
User Interface Development Process
Customers, Products, Business, Marketing Customers, Products, Business, Marketing Design Discovery Design Exploration Evaluate Production Customers: - Roles (Who) - Tasks (What) - Context (Stories) Marketing: - Business Priorities - Messages Technology: - Products - Architecture Design: - Leading/competing technologies Work together to realize the design in detail Evaluate with Customers Storyboard Review & Iterate Design Definition: - Design Problem Statement - Targeted User Roles (Who) - Targeted User Tasks (What) - Design Direction Statements Proposal: Demos/ Lo Fi Prototypes (How) Specification: Hi Fidelity, Refined Design - Based on customer feedback - Foundation in product reality - Refined Design description based on slide by Sara Redpath, IBM & Thyra Trauch, Tivoli
38
Design Thinking Process
We will organize our work in CS147 with the Design Thinking Process popularized by ideo and the Stanford d.school
39
Iteration At every stage! Design Prototype Evaluate
40
Design is driven by requirements
what the artifact is for not how it is to be implemented e.g., phone not as important as mobile app A design represents the artifact for UIs these representations include (?) screen sketches or storyboards flow diagrams/outline showing task structure executable prototypes representations simplify Write essay start word processor write outline fill out outline Start word processor find word processor icon double click on icon Write outline write down high-level ideas .
41
Usability(?) According to the ISO: The effectiveness, efficiency, and satisfaction with which specified users achieve specified goals in particular environments This doesn’t mean you have to create a “dry” design or something that is only good for novices – it all depends on your goals
42
Usability/User Experience(UX) Goals
Set goals early & later use to measure progress Goals often have tradeoffs, so prioritize Example goals(?) Learnable faster the 2nd time & so on Memorable from session to session Flexible multiple ways to do tasks Efficient perform tasks quickly Robust minimal error rates good feedback so user can recover Discoverable learn new features over time Pleasing high user satisfaction Fun DO THIS ON THE BOARD!!!
43
User-centered Design “Know thy User”
Cognitive abilities perception physical manipulation Memory Organizational / educational job abilities Keep users involved throughout developers working with target customers think of the world in users terms `
44
Design Discovery Needfinding & Task Analysis
Observe existing practices for inspiration Make sure key questions answered Ethical questions in design w/ underserved communities ChoreoLab observed/interviewed dancers in studios…. and out in the streets ...
45
Unpacking the Needfinding
ChoreoLab
46
Develop Point of Views (Person + Insight + Challenge) Brainstorm on How Might We Solve
November 10, 2015 We met a homeless guy on a fishing boat, who just a year ago was given a second chance at life We were amazed to realize that thanks to the boat owner’s mentorship, trust, and display of the fishing lifestyle and connection to nature, he has turned around his life from drug addict without a job to someone with success and compassion It would be game-changing if all of us could take a risk to see a spark in others and nurture it into a purposeful transformation.
47
Sketching & Storyboarding
1. Idea generation, Pick 3 or 4… and show in depth Parcel tagbuster Phocus
48
Sketching & Storyboarding
1. Idea generation, Pick 3 or 4… and show in depth Parcel tagbuster
49
Concept Videos Illustrate context of use rather than specific UI
Quick & inexpensive Forces designers to consider details of how users will react to the design
50
Concept Videos: Planning Storyboards
SmartSenior
51
There isn’t even technology shown in this video… it is telling the story of the idea
52
Rapid Prototyping Build a mock-up of design so you can test it
Fantasy Basketball Build a mock-up of design so you can test it Low fidelity techniques paper sketches cut, copy, paste Interactive prototyping tools HTML, Balsamiq, Axure, proto.io, Sketch+Marvel, Modao, etc. UI builders Expression Blend + Visual Studio, Xcode Interface Builder, etc.
53
Evaluation Test with real customers (participants) Low-cost techniques
Wanderlust Test with real customers (participants) w/ interactive prototype low-fi with paper “computer” Low-cost techniques expert evaluation walkthroughs online testing All about trying to measure what works and what does not
54
Learn through experience: Project
Each team will propose a UI-oriented project fixing something you don’t like or completely new idea based on team needfinding Theme Identify a theme of project all projects mobile/wearable/off desktop Groups 3-4 students to a group work with students w/ different skills/interests SE371 (Web) CS387 (Mobile App dev) Others groups meet in class & studio (Wednesdays) weekly Cumulative apply several HCI methods to one interface Team’s will be graded as a team, but individuals who let their team down will be graded appropriately at the end of the term If you do NOT have the time to take this course and do the intense project, please drop it now. Especially students who may be from other programs beyond engineering who aren’t used to the time commitment, please make sure you can do your share. Autumn 2018 Design Thinking for User Experience Design, Prototyping & Evaluation
55
HCI an important part of most of today’s software
Summary HCI an important part of most of today’s software Getting the interface right is hard, but… Solution in Iterative Design including repeated cycles of Design Prototyping Evaluation This course, we learn Interactive design by Theory and Practice!
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.