interface design part 1 user interface n.
Download
Skip this Video
Download Presentation
Interface Design Part 1: User Interface

Loading in 2 Seconds...

play fullscreen
1 / 18

Interface Design Part 1: User Interface - PowerPoint PPT Presentation


  • 296 Views
  • Uploaded on

Interface Design Part 1: User Interface. Chapter 7. Outline. Overview of Design What is "Design"? Design activities Interface Design UI defined User-centered design HCI How to Start UI Design Dialogs & Storyboard Interaction methods Design Guidelines Forms Webpages

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Interface Design Part 1: User Interface' - maxine-mckay


Download Now An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
outline
Outline
  • Overview of Design
    • What is "Design"?
    • Design activities
  • Interface Design
    • UI defined
      • User-centered design
      • HCI
    • How to Start UI Design
    • Dialogs & Storyboard
    • Interaction methods
    • Design Guidelines
      • Forms
      • Webpages
      • Other interfaces
what is design
What is Design?
  • Analysis – Determining Requirements (WHAT)
  • Design - Determining the Solution (HOW)

DESIGN

"the Bridge"

ANALYSIS

IMPLEMENTATION

"Requirements

gathering"

"Construction"

  • Involvement
    • Less user involvement
    • More technical specialists
  • Modeling the solution
    • The blueprint
sdlc phase design
SDLC Phase: Design
  • Core Process 4: Design system components
      • Environment (Ch 6)
      • User Interfaces (Ch 7)
      • System Interfaces (Ch 7 )
      • Application architecture & software (Software- Ch 10 & 11)
      • Database (Ch 12)
      • System controls & Security (Ch 12)
user interface
User Interface

UI = SYSTEM

to the user

  • inputs & outputs that directly involve a human user/actor
    • User-Centered Design
      • Focus on the users
      • Ensure Usability
      • Use Iterative development
    • Human-Computer Interaction (HCI)
      • A field of study concerned with the efficiency and effectiveness of user interaction with computer systems, human-oriented input and output technology, and psychological aspects of user interfaces
how to start ui design
How to Start UI Design
  • Start with Use Cases & use case descriptions!
    • May have been grouped by subsystem
how to start ui design1
How to Start UI Design
  • Group use cases into a Menu Hierarchy
how to start ui design2
How to Start UI Design
  • Determine your Navigation
    • Use MENUs to organize use case functionality
      • Design an overall menu hierarchy
        • subsets for different users
        • Different types of users might have different menus
storyboarding
Storyboarding
  • "Check out shopping cart" use case

Can also use Visio 2010 – Wireframe Diagram

interaction methods
Interaction Methods

Command Line

Form

Menu

Natural Language

Object-based

“Give me a list of all orders in the Northwest region that have not been processed on time.”

ui design guidelines
UI Design Guidelines
  • First, know the…
    • User
    • Use Case(s)
      • Sequence
  • Guidelines
    • Visibility (of controls)
    • Affordance (of controls)
    • Consistency
    • Shortcuts
    • Feedback
    • Yield Closure
    • Error Handling
    • Reversal of Actions
    • Reduce Short-Term Memory Load
    • Reduce Information Overload

Cust Id: 187465

ui design guidelines1
UI Design Guidelines
  • For each Form
    • Application name
    • Form title/purpose
  • Layout
    • Consistency
    • Grouping
    • UI & Paper Form match

ui design guidelines2
UI Design Guidelines
  • Formatting
    • Fonts and colors
    • Tab order
    • Arrangement of controls
      • Perfect alignment & spacing

Layout Toolbar

Alignment

Spacing

Order

Make Same

Size

Center

in Form

Tab

Order

ui design guidelines3
UI Design Guidelines
  • Provide Navigation
    • Form Navigation
    • Record Navigation

Help Facility

Free of spelling & grammatical errors

ui design windows forms
UI Design: Windows Forms
  • Interface Layout and Formatting
    • Consistency, labels and headings
  • Controls
      • Data Entry
        • Text box, List box, Combo box, Radio buttons, Check boxes
      • Navigation
        • Ribbon, Menu bar, Tool Strip, Button, etc.
      • Support Controls
        • Minimize, maximize, close, scroll bars, resize
ui design webpages
UI Design: Webpages
  • Design Considerations
    • Consistency – CSS
    • Multi-media
    • Performance Considerations
    • Users with Disabilities
      • Assistive technologies
        • Text-to-speech & voice-recognition utilities
        • adapts user interfaces to the special needs of persons with disabilities
    • Make it easy to find information
      • Page titles, Search facility
      • Site Map, Photos
      • Links, Bread crumb trails
ui design other
UI Design: Other
  • Design Considerations
    • Screen size
    • Keyboards
    • Touch screens
    • Network capacity
    • App design guidelines
    • Toolkits

Handheld Devices

Kiosks