Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

. Design Decisions: Developing for Mobile - The Template Experience Project


Published on

HCL Nomad allows us to access our Notes applications on tablet and mobile. Currently available for iOS the team behind Template Experience have been working with HCL development and UI design to redesign the standard discussions template for Notes and produce a whitepaper based on that work to assist you with your own mobile development. The beta of that template and whitepaper have now been published and this presentation accompanies that work

Published in: Software
  • Be the first to comment

  • Be the first to like this

. Design Decisions: Developing for Mobile - The Template Experience Project

  1. 1. #engageug De05. Design Decisions: Developing for Mobile - The Template Experience Project Gabriella Davis Tim Davis The Turtle Partnership 1
  2. 2. #engageug Template Experience Project • An HCL sponsored project to produce templates that show Notes development on mobile • The team involved includes Business Partner developers, HCL Development, UX and Support • to read the latest on the project as well as participate in surveys around design 2
  3. 3. #engageug Discussions on iPhone 3
  4. 4. #engageug Discussions on Tablet 4
  5. 5. #engageug Discussions Design • One database, the same data accessed regardless of client • Avoiding duplicate design elements • Ensuring it looks good on whatever client you are using • Using standard Domino Designer code and techniques • Aiming for the design elements to be merged with your existing applications 5
  6. 6. #engageug Where We Are & Next Steps • Continuous development alongside Nomad & Domino Designer • Released along v12 timeline • Technote KB0076430 being published this week • beta version publicly available along with a whitepaper on the design decisions and work done 6
  7. 7. #engageug HCL Nomad • Nomad is the client we are designing for, with both mobile and tablet versions • As much as possible we want to avoid duplicating design elements and code for different clients so you can develop once and access anywhere • Nomad gives us advantages over web development for mobile • It’s another client platform that can be developed alongside the Notes client • It has all the main benefits of a Notes client application, including offline replication to a mobile device and security • It allows us to develop for both phone and tablet, iOS and eventually Android with the same code 7
  8. 8. #engageug Platform Detection • Using @Platform to determine which client is being used • @Platform([Specific]) • PrimaryOSName, for example, iOS • PrimaryOSVersionNumber, for example, 12.4 • iOS Model Type, either iPad or iPhone • Apple Hardware Identifier, for example, iPad8.4 • iOS, 13.3.1, iPhone, iPhone10.4 • Upcoming extensions to @Platform will include parameters for screen dimensions allowing us to size a layout for iPhones and tablets from small to large by detecting maximum screen height and width 8
  9. 9. #engageug Demo & Digging Into Design 9
  10. 10. #engageug Designing Platform Specific Framesets • Let’s revisit our iPhone vs tablet design • We want to avoid multiple design elements doing the same thing but for different screen sizes • We opted to have a launch frameset containing one frame with a computed value of • @If(@Platform([Specific])="iPhone";"phone"; @Platform([Specific])="iPad";"tablet";"other") 10
  11. 11. #engageug 11
  12. 12. #engageug The iPhone Design 1. All Topics view 2. Favourites view 3. Tracking view 4. Filter Search 5. Search toggle 6. FAB (floating action button) 12
  13. 13. #engageug Document Design 1.Switch to edit mode 2.Delete 3.Icon showing this is "helpful". 4.Icon showing this is one of the user's favorites. 5.Icon showing this document is being tracked by the user. 6.When tracking is enabled the details of when it will stop is shown on screen. 7.Comments and responses. The count shows number of unread / total number of comment responses 13
  14. 14. #engageug Scrolling Comments • We are trying to minimise the number of screens / clicks that people have navigate • Comments in response to a document are displayed using passthru HTML • We are then able to also display total number in a thread • Clicking on a comment header opens it on screen • Clicking “All Comments” opens to that document in a view 14
  15. 15. #engageug
  16. 16. #engageug Tags • We are avoiding doing too much on a single screen or working with popups • our approach is to onto a separate screen 16
  17. 17. #engageug Using Icons For Status • To optimise the limited on-screen space on mobile we wanted to make maximum use of images to provide information • In views we used icons to not only change data but to give context to what you’re looking at • Outline - inactive / Filled in - active • We use the same behaviour on a document to show the helpful/favorite/tracking status • Helpful icon in a view column • view column settings / show icon 17
  18. 18. #engageug The F(loating) A(ction) B(ar) • We wanted to move common actions from the action bar in a view which has limited width • The Nomad team introduced the FAB so that action bar icons could be mapped to an iOS sheet menu instead 18
  19. 19. #engageug Right Mouse Click • On Nomad a right mouse click action instead responds to a long press • We use it for document specific actions such as adding a response, deleting or marking a document as “helpful” 19
  20. 20. #engageug Marking Documents As Helpful • Used instead of “Like” • The difference between something being helpful vs liked is that we remove any weighting from a count • A document on an obscure topic that is helpful to one person is just as valuable as a document that is helpful to 10 people • A document is either helpful or it’s not • How do we mark and show “helpful” ? • We use a combination of view column icons and system profiles • Since a document is marked helpful regardless of who marked it we can use a system profile to store that information 20
  21. 21. #engageug Marking a Document Helpful • A long press brings up the menu where you can select “Mark as Helpful” in a view • Alternatively you can click on the helpful icon on a document you are looking at even if you don’t have edit access to that document • A profile form called “HelpfulProfile” is used to create a database profile • there is a field $IsHelpful which contains a formula which computes to the image name to display • the image is an image resource in the database • the form doesn’t exist as a design element as it’s a background profile • refer to the documentation for details of the design elements & code 21
  22. 22. #engageug Favorites • Marking a document as a Favorite is a personal setting • The “Favorites” private on first use folder populates with all documents you have marked each time it opens and clears each time it is exited • You can Favorite (and Unfavorite) by selecting the favourites icon in the document 22
  23. 23. #engageug Setting A Favorite • Our challenge is that the user may not have edit access to the document if they didn’t create it • So we can’t write directly to the document the fact that “Gab” has favorited it • We have a script that populates a background document (one per user) with the unids of any favorited documents • The folder is populated and the icon is displayed based on a lookup of the current document’s unid matching an entry in the background document. 23
  24. 24. #engageug Tracking & How It Works 24
  25. 25. #engageug The Filter Search • We wanted to minimise the amount of typing someone would have to do when searching for information • We built a page that is populated when it loads using LotusScript, and contains the most commonly searched for criteria • On tablet we have enough room to have the filter page always displayed 25
  26. 26. #engageug The Tablet Design 26 Document in Preview mode with restricted options the filter search displays in a left hand frame
  27. 27. #engageug Pilot • The template is ready for its initial pilot although more work will continue throughout the v12 development timeline • There is an accompanying technical whitepaper that details the design and explains the code • You can download the template and whitepaper from HCL’s support site by searching for technote KB0076430 (appearing this week) at • Thanks to: Theo Heselmans, Carl Tyler, Tim Davis, Maxx Sutton, ME Miller, Dave Cohen, Fadil Channer 27