1. CS 235: User Interface Design September 10 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak www.cs.sjsu.edu/~mak

2. Computer Science Dept. Fall 2014: September 10 CS 235: User Interface Design © R. Mak Organization Design Patterns  Feature, Search, and Browse  News Stream  Picture Manager  Dashboard  Canvas + Palette 2  Wizard  Settings Editor  Alternate Views  Multiple Workspaces  Multilevel Help

3. Computer Science Dept. Fall 2014: September 10 CS 235: User Interface Design © R. Mak Navigation Design Patterns 3 Clear entry points Hub and spoke Fully connected Multilevel Sequential Pyramid Designing Interfaces, 2 nd ed. by Jenifer Tidwell O’Reilly Media, 2011

4. Computer Science Dept. Fall 2014: September 10 CS 235: User Interface Design © R. Mak Navigational Design Patterns, cont’d 4 Pan and zoomModal dialog Escape hatchBookmark Designing Interfaces, 2 nd ed. by Jenifer Tidwell O’Reilly Media, 2011

5. Computer Science Dept. Fall 2014: September 10 CS 235: User Interface Design © R. Mak Page Layout  Manipulate page attention to convey meaning sequence points of interaction  Visual hierarchy: What’s important? What’s related? _ 5

6. Computer Science Dept. Fall 2014: September 10 CS 235: User Interface Design © R. Mak How to Show Importance 6 Text sizes to show hierarchy Text densityBackground color Visual rhythmPosition and size Emphasize small items Designing Interfaces, 2 nd ed. by Jenifer Tidwell O’Reilly Media, 2011

7. Computer Science Dept. Fall 2014: September 10 CS 235: User Interface Design © R. Mak How to Show Relationships 7 Peer itemsOne distinguished item Grouped related itemsList of itemsCaptions and comments Containment Designing Interfaces, 2 nd ed. by Jenifer Tidwell O’Reilly Media, 2011

8. Computer Science Dept. Fall 2014: September 10 CS 235: User Interface Design © R. Mak Four Gestalt Principles  Proximity Viewers will associate together items that are placed close together.  Similarity Viewers will associate two things that have |the same shape, size, orientation, etc. _ 8 gestalt: An organized whole that is perceived as more than the sum of its parts.

9. Computer Science Dept. Fall 2014: September 10 CS 235: User Interface Design © R. Mak Four Gestalt Principles, cont’d  Continuity Viewers’ eyes want to see continuous lines and curves formed by the alignment of items.  Closure Viewers’ eyes want to see implicit simple closed forms such as rectangles. _ 9

10. Computer Science Dept. Fall 2014: September 10 CS 235: User Interface Design © R. Mak Four Gestalt Principles, cont’d 10 Designing Interfaces, 2 nd ed. by Jenifer Tidwell O’Reilly Media, 2011

11. Computer Science Dept. Fall 2014: September 10 CS 235: User Interface Design © R. Mak Page Layout Design Patterns  Page layout design patterns provide specific ways to incorporate the layout concepts and principles.  Solve layout problems. _ 11

12. Computer Science Dept. Fall 2014: September 10 CS 235: User Interface Design © R. Mak Layout: Visual Framework 12  What A common framework for all application pages but which allows flexibility to handle varying page content  When Designing an application with multiple pages You want the pages to appear to belong together  Why Provide consistency Help page content stand out

13. Computer Science Dept. Fall 2014: September 10 CS 235: User Interface Design © R. Mak Layout: Center Stage 13  What The most important part of the UI has the largest subsection of the page Secondary windows cluster around in smaller subpanels  When The page’s primary job is to show a single unit of information or to permit a single task  Why Guide the user to the most important part

14. Computer Science Dept. Fall 2014: September 10 CS 235: User Interface Design © R. Mak Layout: Grid of Equals 14  What Arrange equally important items in a grid, each with equal visual weight  When Many items have similar style and importance Allow the user to preview  Why Give each item equal importance Tell the user the items are similar Neat and orderly

15. Computer Science Dept. Fall 2014: September 10 CS 235: User Interface Design © R. Mak Layout: Tiled Sections 15  What Visually separate sections of content Each section has a strong title  When Make the page easy to scan with grouped content  Why Content is structured into easily digestible chunks Obvious information architecture

16. Computer Science Dept. Fall 2014: September 10 CS 235: User Interface Design © R. Mak Layout: Module Tabs 16  What Put content modules into separate tabs Only one tab is visible at a time  When Multiple content types Users only need to see one type at a time  Why Tabs have a familiar physical model Less cluttered user interface

17. Computer Science Dept. Fall 2014: September 10 CS 235: User Interface Design © R. Mak Layout: Collapsible Panel 17  What The user can open and close secondary content panels  When Not enough room to show all content panels Different users have different needs  Why Allow the user to choose what to see

18. Computer Science Dept. Fall 2014: September 10 CS 235: User Interface Design © R. Mak Layout: Movable Panels 18  What The user can rearrange content panels  When Different arrangements for different purposes Different users have different needs  Why Allow the user to arrange the panels to suit his needs and preferences

19. Computer Science Dept. Fall 2014: September 10 CS 235: User Interface Design © R. Mak Layout: Left-Right Alignment 19  What A two-column arrangement Right-aligned labels on the left Left-aligned items on the right  When An input form or any other set of labeled items  Why Neat with strong perceptual grouping

20. Computer Science Dept. Fall 2014: September 10 CS 235: User Interface Design © R. Mak Layout: Responsive Enabling 20  What Progressively enable UI components as the user selects options  When Lead a user through a complex task step by step. The user can easily change his mind  Why The user can see all the options Only the required options are enabled

21. Computer Science Dept. Fall 2014: September 10 CS 235: User Interface Design © R. Mak Layout: Self-Adjusting Layout 21  What The page contents automatically resize to maintain the same arrangement for a different window size and aspect ratio  When Users can resize windows as desired  Why Users choose window sizes and aspect ratios unpredictably

22. Computer Science Dept. Fall 2014: September 10 CS 235: User Interface Design © R. Mak Prototyping Tools (Thanks to Jarad Bell)  Apple Keynote/Microsoft Powerpoint Basic interactivity between individual elements and/or pages.  Balsamiq Rapid development of wireframes Visual design limitations though  Sketch Easily design digital concepts and interface styles. But you can not create a clickable or interactive prototype.  OmniGraffle I have little to no experience with this tool. 22

23. Computer Science Dept. Fall 2014: September 10 CS 235: User Interface Design © R. Mak Prototyping Tools, cont’d  Apple Adobe Muse Allows visual designers to take their adobe elements and create live websites with ease. HTML export can be a little primitive though.  JustinMind Personally, I think this is the best tool besides Keynote.  Axure The most complex and powerful tool right now. The HTML export doesn't work the best for transferring over into development. Steep learning curve. 23

24. Computer Science Dept. Fall 2014: September 10 CS 235: User Interface Design © R. Mak Prototyping Tools, cont’d  MarvelApp Really easy to use. You create hotspots around elements to create interactions with various elements/pages. It allows you to use PSDs from Photoshop. 24

25. Computer Science Dept. Fall 2014: September 10 CS 235: User Interface Design © R. Mak Desktop Prototyping with Java Swing  Most easily done using the NetBeans IDE. Includes a graphical drag-and-drop editor. Automatic Java code generation.  Tutorials: Introduction to GUI Building http://netbeans.org/kb/docs/java/gui-functionality.html http://netbeans.org/kb/docs/java/gui-functionality.html Designing a Swing GUI in NetBeans IDE http://netbeans.org/kb/docs/java/quickstart-gui.html http://netbeans.org/kb/docs/java/quickstart-gui.html 25 Demo

26. Computer Science Dept. Fall 2014: September 10 CS 235: User Interface Design © R. Mak 26 Java Layout Managers  A Swing container is a component that can contain other components. Examples: A JFrame object and a JPanel object are containers.  A Swing container delegates laying out its components to a layout manager. Swing has several predefined layout managers. Example: The FlowLayout manager. _

27. Computer Science Dept. Fall 2014: September 10 CS 235: User Interface Design © R. Mak 27 Java Layout Managers, cont’d  A layout manager also controls how the individual components reshape themselves when you reshape the container at run time. Example: You reshape a JFrame window with the mouse and the window contents reshape themselves. Which layout design pattern?  self-adjusting layout _

28. Computer Science Dept. Fall 2014: September 10 CS 235: User Interface Design © R. Mak 28 Java Layout Managers, cont’d Object-Oriented Design & Patterns, 2 nd ed. by Cay Horstmann John Wiley & Sons, 2006. Demo

29. Computer Science Dept. Fall 2014: September 10 CS 235: User Interface Design © R. Mak Assignment #2  Create a prototype of your application. Use organization, navigation, and page layout design patterns. Your choice of prototyping tool.  Demonstrate at least 2 of your use cases.  Do a live presentation in front of your client team and the rest of the class. Show how you met (most) of the requirements. Defend your design decisions. 29

30. Computer Science Dept. Fall 2014: September 10 CS 235: User Interface Design © R. Mak Assignment #2, cont’d  Presentations September 22, 24, and 29 Exact date for each team determined randomly.  Each presentation will be 30 minutes. Explain the application. What were the requirements?  Highlight the ones that your prototype meets.  Which use cases will your prototype show? Live demo. Q&A with the client team. Q&A with the rest of the class. 30

31. Computer Science Dept. Fall 2014: September 10 CS 235: User Interface Design © R. Mak Assignment #2, cont’d  Scoring: Up to 50 points on the prototype.  Demonstrate use cases well?  Meet requirements? Up to 50 points on the presentation.  Design team members well prepared?  All design team members participate in the presentation?  Explain application well?  Defend design decisions well?  Answer questions well? _ 31