1 comment

The Design of Office Quick Contacts (Office PNP Sample)

Recently Waldek Mastykarz (@waldekm) and I developed a sample for the Office Pattern and Practices. This sample query contact information by using the Microsoft Graph. We also optimism the user interface for mobile use.
While Waldek took care of the technical development of this sample I was responsible for the user experience and user interface design.

Content First followed by Mobile and Cloud First

Whenever you sketch out the application, it is always a good decision to define the content first before you start to develop. This doesn’t mean that you need to know the actual content but it should include an idea what information should be included. A task that is easy for such a simple app.
The second step was to sketch out the mobile experience and user interface.
Disconnected from the technical possibilities I thought how an ideal application, for contacts should look like. Especially I thought how I like to interact with the contact information provided by the app. Really soon in this process it was clear to me that I like to have a shortcut to all actions by swiping buttons over the contact information.
In addition to this I thought a detail view that keep you in the context of the search result would be suitable too.
Followers of my blog might know that I have used atomic design to sketch and build user interfaces. I used it too for creating the user interface design and the user experience.

Sketching the contact

To design and prototype an Application you can spend your time in great tools such as PhotoShop, Illustrator, Sketch or any other application of your favor. In case of web design, they are not really time efficient and sketching an application might take longer than start directly in the browser. If you still need to start up a website you can Get a website here. In atomic design you first define the smallest element (atoms) of a user interface first. Then you combine those small pieces to larger user interface components (molecules) and those will combine with even larger (organism). Finally, all the single components end up in templates and page, that actually define the overall design of a web site or application.
So let’s start with the small parts first.

The Buttons

The first thing that needs to be considered on the button was the actual size of the buttons. I defined the buttons to be at least eleven millimeters high and wide.
Microsoft Windows 8 Touch Guidelines provided me with all the information that I need to know about designing a touch enabled interface. Those guidelines were first released whit Windows Phone 7 and are based on a research Microsoft did. Nowadays this research is the base of other style guides too.
In this document a recommended minimum size for touch enabled user interface is defined with seven millimeters. Smaller clickable areas cause more problems when the user tries to click / touch them and the error rate of wrong clicks is much higher.

Button size related to error rate

This guideline also shows that the average size of an index finger tip is around eleven millimeters. With all those considerations, I thought a size of eleven millimeter will give the application a good overall usability.
The next question was how large eleven millimeter actually are translated to pixel or em.
To find the correct size for my buttons I create a reference button with a size of eleven millimeter. Actually millimeter is a valid unit to be used in CSS.

Reference Box and button design

Reference Box and button design

Beside the reference box I added SVG icons in different sizes. From left to right the icons are 64px, 48px, 32px, 24px, 16px.
With this small trick I was able to identify the correct size of a button and used 32 pixel for them. This size matches best with the reference box.

The button implementation

After I found the perfect icon size I implement the real buttons in two different flavors. One implementation is a real html <button>. In addition I create a hyperlink button too.
The reason why I needed both implementations was that in general you should use a button when you trigger something on the user interface. For example, to close the detail view, it is better to have a button that performs this action.

HTML Button and hyperlink as button side by side

HTML Button and hyperlink as button side by side

When you like to make a phone call you don’t need a button nor a javascript. In this case you simply need to define a hyperlink and prefix the phone number with ‘tel://’ This will force the device to open a phone call instead of opening hyperlink.
You see it highly depends what you try to accomplish and if you can do it natively without code. In this case your application will be more fail safe. Only use code if really required and cannot be accomplished in another way.

Chose the right font size

Again, I created some atoms or patterns because I needed two different font sizes in this application.

Design of text sizes

Design of text sizes

The larger font should be used for the name of the contact person. Smaller font size I used for other text elements. These two different font sizes also give the application a better visual hierarchy. So it is a big plus for usability.

The profile picture

During the content, design stage I decided to have a profile picture next to the contact. I already designed the default button size so the size of the small profile picture was already defined.

contact image

Contact image

Using the same size for profile picture and buttons also gave the user interface a nice alignment.

Create a person element

After I created all the base elements, it was time to assemble them together. First, the person element in the list view needs to be created.

Contact Card List

Contact Card List

After that I defined the detail view of the person element.

Contact card full details

Contact card full details

In this step I also defined how the transition between the list view and the detail view works. By adding a simple CSS class I was able to transform the element. All the animations were done using CSS3 transitions.

Button swipe and transformation

In addition to the contact cards I also sketched out the button list with horizontal and vertical button alignment.

Contact card list after swipe

Contact card list after swipe

I added this list of buttons directly in the small style guide I implemented. On swipe the buttons overlay the contact details. On click the cards align with the right side of the contact card. I chose them to be on the right side because most people are right handed and hold their device in the right hand.
So for most people the user interface will be easier to use and you don’t have to stretch the thumb across the screen to reach the buttons.
The last addition was to create a search box that followed the same pattern.

Additional things to know

SVG Buttons

Icon fonts in 2016 shouldn’t be used anymore because they have too many negative side effects. Especially when it comes to mobile device development, usability and accessibility. If you don’t trust me, I highly recommend to watch the session ‘Death to icon font’ by Serena Davies. In this session, she explains a lot of those side effects and especially in case of accessibility.
To accomplish the same thing just by using SVG, we used an SVG symbol set. If you are not familiar with this technique, it is no problem because it works the same was as an image sprite works for binary images. All icons are stored in a file named ‘icons.svg’ and contains all the glyphs of the Office 365 icon font. To add the SVG icons to the design the following code was used.

The ‘link: href’ point of the icon file and the additional ‘#icon-phone’ reference the icon in the icon file. In this case the icon for a phone was requested from the file.
This works great in any browser and mobile device except Microsoft Edge, Internet Explorer 11 and earlier.
Currently Microsoft does not support external SVG files. If you like to use it you have to embed the full code of the SVG icon in your source code.
The good thing is that there is a polyfill available that adds this support to the Microsoft browsers. The name of this script is SVG4Everybody and is written in plain vanilla.js.
After we added this script we were able to support even Windows Phone 8 and older browser that support inline SVG icons.

Final thoughts

I hope this blog post illustrated my ideas behind the user experience and user interface design. Especially how we used a modern development and design workflow by using atomic design.
In addition to this application, we created a simple style guide that can be further extended and improved in future. This workflow also improves the development process.
I was able to hand over the HTML elements, the CSS file and some simple JavaScript files that demonstrate the behavior of this application. Waldek on the other hand focused on the Microsoft graph integration and implementation of the Angular application.
The implementation of the application uses the exact same code style sheet that popped out of the style guide.
I think this shows that a perfect development team in the future consist of developer and designers. Developer develops the code and designer develop the user experience and user interface.
I really enjoyed working with Waldek on this because I got some really great feedback on the user interface and transition timings too.
If you like to check out this application you will find the code in the Office PNP Samples released in April 2016.
You will find more information on the technical implementation in Waldeks blog post ‘Find relevant contacts easily on your mobile phone with Quick Contacts (OfficeDev PnP code sample)‘.