1. SD1230 Unit 5 Turning a Problem into a Program

2. Course Objectives During this unit, we will cover the following course objectives: – Identify the different processes and roles of a software development cycle. – Define all the necessary steps of software design. – Identify the characteristics of mobile applications.

3. Learning Outcomes Completing this unit should help enable you to: – Explain the relationship between user requirements and application features. – Identify major steps involved in the design and development phases of application development. – Given a problem, define the steps necessary to solve it, and create a simple flowchart to illustrate those steps.

4. Ingredients for a Great Mobile App Context Information Architecture Visual Design

5. Impact of Visual Design on User Expectations Great design High expectations Value and trust

6. Lowest Common Denominator Design How do I visually express this content across the most possible devices? Leads to tent pole designs

7. Apple’s App Store

9. Successful Mobile Design Create the best experience Multiple media Context Visual design

10. Abilities Required for Good Design Natural gift for being able to see visually Ability to manifest the vision into something users can see, use, or participate in Knowing how to use the medium to achieve goals

11. Six Elements of Mobile Design ContextMessage Look and Feel LayoutColorTypography

12. Context Who are the users? What is happening? When will they interact? Where are the users? Why will they use your app? How are they using their mobile device?

13. Messaging The overall mental impression you create with your design

14. What Does This Design Say?

19. Look and Feel Used to evoke emotion Can be based on design patterns Apple’s Human Interface Guidelines (HIG)

20. Pattern Tap

21. Design4Mobile

22. Layout How users will visually process the page First considered during the information architecture phase What type of navigation? – Tabs or a list? – Sidebar on larger screens? How to visually present content Fixed vs. fluid

23. Wireframe

24. iPhone Safari Layout Dimensions

25. Scroll-Based Application

26. Color Different bit depths supported by devices Emotional response to color

27. Posterization

28. Device Color Depths Color depthNumber of colorsDevices 12-bit4,096Nokia 6800 16-bit65,536HTC G1, BlackBerry Bold 9000, Nokia 6620 18-bit262,144Samsung Alias, Sony Ericsson TM506 24-bit16.7 millioniPhone, Palm Prē, Nokia N97

29. Psychology of Color White Light Truth Peace Black Absence Power Mystery Gray Elegance Humility Respect

30. Color Palettes Sequenced Adaptive Inspired

31. Adobe Kuler

32. Typography Subpixel-based screens – Divides pixel into red, green, and blue units – Greater level of antialiasing Greater pixel density – More pixels per inch (PPI)

33. Microsoft ClearType

34. Dimensions and PPI

35. Readability Guidelines Use a high-contrast typeface. Use the right typeface. Provide decent leading or line spacing. Leave space on the right and left of each line. Generously utilize headings. Use short paragraphs.

36. Graphics Icons Photos and images

37. Icon Example

38. Glyphish

39. Multiple Orientations

40. Design Tools and Interface Toolkits

41. Designing for Different Screen Sizes

42. Typical Flow of Information on Mobile Devices

43. Fingertip Size Controls

44. Code Design Algorithm – Procedural solution to a problem Pseudocode – Step-by-step description in English Flowcharts – Graphical display of each step

45. Pseudocode Example Sequence Problem: – Calculate the total cost of a single-item order. Steps: 1.Get the number of items. 2.Get the price of the item. 3.Multiply the number of items by the price. 4.Output the total.

46. Flowchart Example Sequence Problem: – Calculate the total cost of a single-item order. Get the number of items Get the price of the item Multiply the number of items by the price Output the total

47. Pseudocode Example Decision Problem: – Calculate the total cost of a single-item order. Add sales tax if applicable. Steps: 1.Get the number of items. 2.Get the price of the item. 3.Multiply the number of items by the price to calculate the total. 4.If the order is taxable: a.Multiply the total by the tax rate. b.Add the sales tax to the total. 5.Output the total.

48. Flowchart Example Decision Get the number of items Get the price of the item Total = Price * Number Taxable? Yes Tax = Total * Tax rate Output the total No Total = Total + Tax

49. Pseudocode Example Loop Problem: – Calculate the total cost of a multiple-item order. Add sales tax if applicable. Steps: 1.Get the number of items. 2.Get the price of the item. 3.Multiply the number of items by the price to calculate the total. 4.Repeat Steps 1-3 until all products are processed. 5.If the order is taxable: a.Multiply the total by the tax rate. b.Add the sales tax to the total. 6.Output the total.

50. Flowchart Example Decision

51. Summary In this unit, we covered the following topics: – Mobile visual design – Pseudocode – Flowcharts