This is the page for the UX/UI design portion of the Shirly project, started ~ 6/27/2012.


The UI design includes:

  • Interaction design: How the application behaves, and general lay-out. Demonstrated through low-fidelity wireframes; shared early with team to assess design and development effort.

  • Usability testing: This is outside of beta testing and comes early in the design phase. Could be iterative, depending on available time in schedule.

  • Visual design: High-fidelity mock-ups that show the look and feel of the application once the interaction design has been finalized.

  • Graphics & final deliverables: These include graphics that development needs to implement UI, any visual specifications (fonts, etc.), etc.

 

***Attention: Implemented UI differences based on iOS release (discovered 8/28/2012): UI differences with older iOS version

 

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Wireframes and Mock-ups:


7/3/2012: Initial rough wireframes:

User looks up conditions via a scrolling alphabetical index. A menu button quickly takes user back to navigable options. Navigable options are listed vertically, which makes it easy to add/remove them in future releases (or to use as a template by other groups who need a mobile content viewer).


Quick access to conditions by letter... via larger buttons and less scrolling. Main navigation is always visible via bottom tabs. Very task-focused UI for user who almost always uses the app for looking up conditions.

 

Related notes: Met on 7/3/2012 to discuss these wireframes. We were going to show these to Rachel, but decided to hold off because we need to add the full guidelines (not just the PDF version). We realized that there are supporting topics (which are not conditions... e.g., 'Special Populations', 'Clinical Prevention Guidance', etc.), and that the full guidelines really should be in there so everything is covered. Sara is going to revise wireframes accordingly.

 

_______________________________________________________________

7/10/2012: 2nd iteration of rough wireframes:

    • Design A: DesignA_2nd_iteration.pdf
      Design A as above except: Full guidelines are added; Notifications are added; Menu fleshed out with icons and possible name for the Conditions (quick pick); Treatments are broken out.


    • Design B: DesignB_2nd_iteration.pdf
      Design B as above except: Menu is added instead of bottom navigation tabs; Full guidelines are added; Notifications are added; Menu fleshed out with icons and possible name for the Conditions (quick pick); Treatments are broken out.

     

Related notes: Met on 7/10/2012. Wireframe/UI discussion take-aways:

  • We're going with Design A
  • Informed of new requirements from Rachel. These include a notification technique (JIRA items #37, #38, and #39) and a way to show related content (JIRA item #40).
  • The Sexual History Guide now has a lower priority (went from Critical to Major). It may turn out that we just do the PDF version, depending on time, etc.
  • Rachel has SMEs, but not people who fit the user persona (e.g., doctors).
  • Greg says he's not sure the sliding menu can be implemented as wireframed (with current page partially showing). We might have to do it as a different view.
  • I'm revising wireframes based on new requirements. Want to do some informal testing (w/ 5 people). Will need to get started on visual design soon.

_______________________________________________________________

7/17/2012: 3rd iteration of rough wireframes:


Related notes: Met on 7/17/2012. Wireframe take-aways:

  • We've selected the notification method shown in notification_method1.pdf above: the bottom banner, non-modal.
  • Need to update the Notifications area (off the main menu) so all notifications link to a second page that displays the entire notification, and gives the user the option of going to the related screen(s) from there.
  • Need to think about how we could accommodate multiple notifications per screen.
  • I'm going to modify a header in the Related Content area so that it looks made-up by an SME... not a header from the STD Guidelines.
  • Tom will share the modified wireframe with Rachel for any feedback.
  • I'm going to start working on visual design ideas.

_____________________________________________________________

7/18/2012: Modified wireframe: Design_update_7_18_2012.pdf

  • Tom discussed modified wireframe w/ Rachel on 7_18. She liked it and didn't have any more changes/requirements.

___________________________________________________________

7/19/2012: Wireframe reflecting ONLY the critical issues (first iteration of app): critical_issues_only.pdf

 

7/30/2012: I missed status meeting on 7/26 (due to illness). Decisions were made about which user stories will be in Iteration 1. Below is the wireframe PDF showing what I *think* was intended, but with a question about Condition Quick Pick user stories. Will get clarity during 7/31 status meeting. Iteration 1 user stories: Iteration1.pdf

 

 

7/31/2012: First stab at visual design ideas (without knowing the selected framework), so the cake is NOT baked... this is just brainstorming: 1_iphone_main_menu.png ,2_possible_table_page.png , 3_main_menu_page.png


8/3/2012: More complete view of visual design:

 
8/7/2012:
Iteration 1 Visual Design Mock-ups: PPT:  Visual_mockups.pptx -or PDF (resolution doesn't look as good in PDF): Visual_mockups.pdf

Notes: I'm researching how to use Dreamweaver 6 with jQuery mobile support. Greg and I discussed my taking the screens as far as I can in Dreamweaver with HTML, CSS, and possibly jQuery. I will need to make use of the Assets panel in Dreamweaver, and we plan to use the version control functionality already in DW.

 

 

NOTES on jQuery implementation of VISUAL design:

  • Difficulty customizing jQuery buttons to use my own graphics. Unwanted shadows and bevel displaying.

  • Difficulty making buttons in footer appear more like tabs.

  • Overall, feel that button customization (using one's own graphics) is one of the hardest visual design tasks with jQuery mobile.

  • I have to override jQuery default CSS to make the entire page title appear (not get truncated with '...').

  • On Main Menu, options are limited for icons. By default, can only use tiny (16x16) ones or large (80x80) thumbnails. Otherwise, the alignments/spacing relative to the menu text looks strange (too much space between and below).
    • After much research, I came up with a compromise. I can use the class for thumbnails but force a larger image for the icon (larger than 16x16), by using a minimum size specification. It's not perfect, but better than other options.

  • Implementing the visual design w/ jQuery depends on the default CSS themes, creating new CSS themes. It is not as straight-forward as simply adding CSS because jQuery adds its own CSS classes that you cannot see as you are coding, or even when you view the source code in a browser. Many customization options require overriding defaults and researching blogs, stack overflow, etc. jQuery.com documentation only addresses the defaults.

 

NOTES on jQuery implementation of INTERACTION design:

  • A-Z indexer for Condition Quick Pick may not be possible. Can't find a jQuery technique to do it, although it is a native iOS component.

  • The slide-in menu is taking longer than expected. A preliminary one is in place, but it's not sliding smoothly and requires hard-coding on each HTML page (difficult for maintenance).

  • Getting the tabs in the bottom navbar (for conditions) to behave like tabs but still have custom icons was quite difficult and required my breaking the content into separate HTML pages. Once that was done, it looked good in the browser (and the Dreamweaver smart phone preview), but didn't work in the actual build.

 

Content in first build, 8/21/2012 (updated 8/28/2012) (this just takes you to web version, not a download for native app): edemo.phiresearchlab.org/shirly/www/

  • No labels