UI/UX Design and Implementation

Slides:



Advertisements
Similar presentations
DEVELOPING A METHODOLOGY FOR MS3305 CW2 Some guidance.
Advertisements

User Experience Krista Van Laan. Agenda What is User Experience? How does a User Experience team support the rest of the organization? What processes.
UX Portfolio Derek Smith. Overview Slides to walk through the UX activities of a sample project Present key design elements of the sample project Some.
Part 1: Introducing User Interface Design Chapter 1: Introduction –Why the User Interface Matters –Computers are Ubiquitous –The Importance of Good User.
11 HCI - Lesson 5.1 Heuristic Inspection (Nielsen’s Heuristics) Prof. Garzotto.
SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 25, 2003.
Part 4: Evaluation Days 25, 27, 29, 31 Chapter 20: Why evaluate? Chapter 21: Deciding on what to evaluate: the strategy Chapter 22: Planning who, what,
CS147 - Terry Winograd - 1 Lecture 6 – Usability Terry Winograd CS147 - Introduction to Human-Computer Interaction Design Computer Science Department Stanford.
Today’s class Group Presentation More about principles, guidelines, style guides and standards In-class exercises More about usability Norman’s model of.
Heuristic Evaluation Evaluating with experts. Discount Evaluation Techniques  Basis: Observing users can be time- consuming and expensive Try to predict.
Evaluation Through Expert Analysis U U U
Nine principles of design Simple and natural dialog Speak the user’s language Minimize user’s memory load Be consistent Provide feedback Provide clearly.
Evaluating with experts
SIMS 213: User Interface Design & Development Marti Hearst Tues Feb 13, 2001.
Testing HCI Usability Testing. Chronological order of testing Individual program units are built and tested (white-box testing / unit testing) Units are.
Evaluation: Inspections, Analytics & Models
Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise.
1 SKODA-AUTO.CZ prototype evaluation Poznań, 23th of March 2015.
Heuristic evaluation IS 403: User Interface Design Shaun Kane.
Heuristic Evaluation “Discount” Usability Testing Adapted from material by Marti Hearst, Loren Terveen.
Heuristic Evaluation: Hotels.com
SAMPLE HEURISTIC EVALUATION FOR 680NEWS.COM Glenn Teneycke.
INFO3315 Week 4 Personas, Tasks Guidelines, Heuristic Evaluation.
Merja & Pauli Rapid prototyping & other stuff.
Chapter 26 Inspections of the UI. Heuristic inspection Recommended before but in lieu of user observations Sort of like an expert evaluation Heuristics.
Overview of the rest of the semester Building on Assignment 1 Using iterative prototyping.
Basic Principles of HCI Lecture Requirements Analysis Establish the goals for the Website from the standpoint of the user and the business. Agree.
Nielsen’s Ten Usability Heuristics
Usability Evaluation/LP Usability: how to judge it.
10 Usability Heuristics for User Interface Design.
Multimedia Specification Design and Production 2012 / Semester 1 / week 5 Lecturer: Dr. Nikos Gazepidis
Software Engineering Chapter 16 User Interface Design Ku-Yaw Chang Assistant Professor Department of Computer Science and Information.
SEG3120 User Interfaces Design and Implementation
New Media Research Methods- Part 1 Planning stage: Using Methods, Data and Tools to explore User’s Experience. How methods relate to research questions?
Evaluation of User Interface Design 4. Predictive Evaluation continued Different kinds of predictive evaluation: 1.Inspection methods 2.Usage simulations.
Design 2 (Chapter 5) Conceptual Design Physical Design Evaluation
INFO 355Week #71 Systems Analysis II User and system interface design INFO 355 Glenn Booker.
Chapter 15: Analytical evaluation. Inspections Heuristic evaluation Walkthroughs.
Chapter 15: Analytical evaluation Q1, 2. Inspections Heuristic evaluation Walkthroughs Start Q3 Reviewers tend to use guidelines, heuristics and checklists.
Evaluating a UI Design Expert inspection methods Cognitive Walkthrough
Developed by Tim Bell Department of Computer Science and Software Engineering University of Canterbury Human Computer Interaction.
Heuristic Evaluation Short tutorial to heuristic evaluation
Basic Elements.  Design is the process of collecting ideas, and aesthetically arranging and implementing them, guided by certain principles for a specific.
Usability Engineering: Formative Evaluation of NSDL Projects Dr. Manuel A. Pérez-Quiñones Dept. of Computer Science Virginia Tech Blacksburg VA
The Design Process A bluffer’s guide to interface design A ‘proper’ Design process.
User-Centered Design (UCD) Overview
© 2016 Cognizant. © 2016 Cognizant Introduction PREREQUISITES SCOPE Heuristic evaluation is a discount usability engineering method for quick, cheap,
Ten Usability Heuristics These are ten general principles for user interface design. They are called "heuristics" because they are more in the nature of.
Heuristic Evaluation May 4, 2016
User-Centered Design Services for MSU Web Teams Sarah J. Swierenga, Director Usability & Accessibility Center MSU Webmasters 402 Computer Center February.
Product Innovation & UI\UX Workshop
Mobile Apps, Web Design, Digital Marketing Company
Human Computer Interaction Slide 1
UI/UX Design and Implementation
Heuristic Evaluation August 5, 2016
Principles of User Experience Design
PROJECT LYREBIRD CATHERINE ERZETIC.
Design rules.
Mobile App ux/ ui design In High Quality.
A NEW FACE OF THE TECHNICAL COMMUNICATOR – UX IS OUR STRENGTH – WE DESIGN TO WRITE BY CHRIS GANTA © 2016, STC INDIA CHAPTER.
Usability Testing: An Overview
A heuristic evaluation of Problets
Heuristic Evaluation Jon Kolko Professor, Austin Center for Design.
Software Engineering D7025E
Usability Techniques Lecture 13.
One-timer?. A new face of the technical communicator – UX is our strength – we design to write.
10 Design Principles.
Nilesen 10 hueristics.
Evaluation: Inspections, Analytics & Models
Evaluation: Inspections, Analytics, and Models
Presentation transcript:

UI/UX Design and Implementation Implementation of User Application

UI/UX Design The process of enhancing user satisfaction by improving the usability, accessibility, pleasure provided in the interaction between the user and a product. What is UX https://www.youtube.com/watch?v=-rY2qd7G238 https://www.youtube.com/watch?v=-L4gEk7cOfk UI & UX https://www.youtube.com/watch?v=2wZUTe70w1Y

What is UX design https://www.youtube.com/watch?v=-rY2qd7G238 Create positive experiences 10 seconds whether to continue or exit! Needs of users UX design early! Easy to understand, to use https://www.youtube.com/watch?v=-L4gEk7cOfk Code – Bone, skeleton UX – Organs UI – Cosmetics Big picture first, not too much detail in the beginning

The Design Process Brain Storming (Define Problem) Project Planning (Research) Wireframe Prototyping Testing and Evaluating Refining (345) https://www.youtube.com/watch?v=WcFSZGvXtjA https://www.youtube.com/watch?v=r34XQDoZ0y0

UI & UX Design Example Visual Design Showreel Drawing the problem https://www.youtube.com/watch?v=3LKajP0jv4A Wireframe, prototyping Drawing the problem https://www.youtube.com/watch?v=F0m5HeSpPFU Sketch before coding Mobile UI/UX Design https://www.youtube.com/watch?v=WaLnYOa9yFA Design process

Design Tip 10 Usability Heuristics Fitts’s Law https://www.youtube.com/watch?v=hWc0Fd2AS3s Communicate clearly with user Oops, emergency exit, back to previous Consistency, standards, guideline Error prevention - alarm, warning Visibility, minimize user’s memory load Novice or Expert, support both Simple and clear Easy error message, help documentation Fitts’s Law https://www.youtube.com/watch?v=95RoKSFyQ_k it's faster to hit larger and closer targets