INBS 540 Week 6

1. INBS 540 Week 6 • Application Flows & Technical Development

2. User Experience vs. Functional Specifications • What’s the difference? • User Experience tells what the user expects • Functional Specs are detailed instructions to the developer – critical for the Technical Phase

3. Functional Specs • Describe the functional specifications for a real-life object: an orange

4. Possible Functional Specs: • An Orange: • Attached to a tree • Round spherical shape • Rubbery skin layer • Sections filled with juice • Seeds

5. Possible Func Spec: • A Lemon • Attached to a tree • Round spherical shape (almost) • Rubbery skin layer • Sections filled with juice • Seeds • Is the User Experience the same for a lemon and an orange?

7. Process Flow diagrams • Reference www.jjg.net/ia/visvocab

8. Visual Vocabulary horizontal gluedot is attached to the end of this arrow vertical gluedot is attached to the end of this arrow

9. submit invalid valid search results refine query content pages Search Process From the search query page, the user can submit a query. The system checks to see if the query is valid; if it is not, the system returns the user to the query page. If the query is valid, the user is presented with a sequence of search results pages. From these pages, the user can navigate to one or more content pages matching the query, or return to the query page to refine the query. search query

10. Customers will be able to register. After registration they will be asked to login. If the login information is incorrect (username and password don’t match) they will be directed to the login page. If the login information is correct, it will be confirmed and the user will be directed to the personalized page. invalid submit valid User Homepage Simple Registration Process Registration Confirmed Register Login Entry point Home Login Confirmed

11. Class Exercise • Use Powerpoint to draw an application flow diagram for a simple site: • User registration • Login • Forgot your password?

13. BYOB: Overview • Oxygen.com’s “Build Your Own Business” Contest promotes women entrepreneurs by selecting 2 winners who will receive investment and other sponsored prizes (office equipment, expert consultant advice, etc) to help build a successful start-up business. Winners are selected by a panel which reviews their business plans for viability and originality. • The contest is sponsored, so every page (besides the Entry Form) will feature sponsor’s banners

14. Before the Contest begins: • This feature is an online event that starts on June 1st (start date) and ends on June 30 (end date). Visitors before the start date will be able to learn about the program and the prizes & rules, but are not able to enter the Contest yet; they will be told the date the Contest begins. • Applicants will describe a business they have started or would like to start, and the winner will be awarded a cash investment and other sponsor prizes to help them start or develop their own business. • Visitors will have access to the Prizes, Past Winners, & Rules pages at this time.

15. During the Contest Period • During the Contest period, the Contest home page (and contest navigation) offers visitors links to the entry page (as well as the rules, prizes, and past-winners pages). • On the Entry page, the visitor can fill in her information (name, email address, phone, mailing address, sex & birthdate) and have the opportunity to sign up for additional features including Oxygen’s Money & Work Newsletter, and one or more sponsor newsletters. • When she submits the form, her gender & age is checked, and if she is eligible (Female, 18 or older), her application will be accepted. Successful applicants will receive an email from Oxygen that includes their Contest Questionnaire form (see below).

16. Data Entry Validation • In addition, the Entry Form should check that all the fields are filled out properly: • first & last name required • phone numbers, email addresses, zip codes should be validated for format; • User must select if they are starting a new business or have an existing one (one prize in each category) • User must check the box accepting the terms of the rules • User must enter their birthdate & gender • If they make an error, they will see a popup message with instructions, and will return to the Entry form to fix it.

17. Under 13 • If the visitor’s birthdate indicates they are under 13, she will see the Sorry-Under 13 page, explaining that Oxygen cannot gather contact information from people under 13. Additionally, by use of a cookie, this person will not be able to visit the entry page a second time, but will be redirected to this page instead. • The “Under 13” cookie is the same cookie used throughout the Oxygen site, and will have the same effect on other contests, sweepstakes, and any forms that request contact information beyond an email address.

18. Under 18 • If the visitor’s birthdate indicates they are under 18, she will see the Sorry-Under 18 page, explaining that Oxygen cannot accept Contest entries from minors. Additionally, by use of an “Under 18” cookie, this person will no longer have access to the Entry page, but will be redirected to this page instead. • The Under 18 cookie is the same cookie used on other Oxygen contests & sweepstakes.

19. Women only • If the visitor has described themselves as “Male”, they will see the “Sorry-Women Only” page, which explains that this contest is reserved for developing Women’s businesses. There will not be a cookie attached to this entry or other Contest.

20. Successful Entries • Women 18 or over who complete the Entry Form will see a Thank You page, explaining the rest of the process (they’ll receive a detailed questionnaire by email), and offering links to sponsored offers and other relevant links on Oxygen.com

21. Continuing the Contest Entry • The second phase of the Contest application is handled by email, and operated by an outside agency which has assembled a panel to review business plans. Applicants receive a Contest Questionnaire -- an email survey where the applicant describes the business they want to start (or have already started). • When they reply to the email according to its instructions, they will receive a confirmation email indicating they are entered into the Contest.

22. Post-contest Home pages • After the Contest Period ends • After the deadline for contest entries has passed, visitors will see an alternate home page & local navigation, that explains that the contest is over and that the winners will be announced on a future date. Visitors will still have access to the Prizes, Past Winners, and Rules pages, but not to the Entry form. • After Winners are Selected • When the winners are announced, visitors will see a page congratulating the winners, providing a brief description of the businesses they are developing. There will be a link to Past Winners, Rules, and Prizes.

23. BYOB: Home & Nav Logic

24. BYOB: Wireframe

25. BYOB: Entry Form Logic

27. Visual Vocabulary 2 • http://www.jjg.net/ia/visvocab/ • http://www.jjg.net/ia/visvocab/garrett_ia_ppt.zip • When do you use a: • Decision point? • Conditional connector? • Conditional branch? • Conditional selector? • Cluster? • Conditional area?

28. Shopping Cart Flow Open Shopping Cart IA http://www.mercy.edu/faculty/ozdogan/inbs5403_02/Files/InformationArchitectureoftheShoppingcart.pdf

29. Shopping Cart IA – pg.5

30. MetaFilter.com • http://www.metafilter.com • http://www.jjg.net/ia/visvocab/metafilter_ia.pdf • Look at both, and discuss

31. Yahoo Mail System • Article • http://www.boxesandarrows.com/archives/yahoo_mail_simplicity_holds_up_over_time.php • Diagram • http://www.boxesandarrows.com/archives/images/031102_YahooMail/jjg_ymail_letter.pdf • Discuss

33. Managing the Technical Build

34. Model-View-Controller • What is “Model View Controller”? • Separates different aspects of the web application into different functional parts • Puts each role in charge of their work • Makes the system more scalable & manageable • What is meant by scalable?

35. MVC • Model • The business logic • View • The display of the web application • Controller • The programming

36. MVC • Every web project has all three aspects • Using MVC means you separate them • Database reflects the business model • Programming will draw on visual templates instead of embedding html formatting tags into the application code • You can ask your programmers how they are separating format from program logic, or how they are implementing MVC

37. Code Review • Code review means looking at the code and deciding if it can be improved • Clarity & understandability • commenting, naming conventions • Structure / organization • Reusable functions • Question: is code review • Important? • Urgent? • How can you encourage developers to write clear & well-organized code, when they might have more urgent tasks?

39. Creating Prototypes • Your Prototype can be either paper or html • More detail than the wireframes • Use actual labels & text • Understandable for an outsider • Used for usability testing • Here are some readings (also on class site) • http://www.boxesandarrows.com/archives/what_an_ia_should_know_about_prototypes_for_user_testing.php • http://www.boxesandarrows.com/archives/html_wireframes_and_prototypes_all_gain_and_no_pain.php • http://www.boxesandarrows.com/archives/dreamweaver_primer.php – has a useful CSS stylesheet