When we think about digital strategies that cultivate User Adoption in SharePoint the execution takes on many shapes and sizes. These methods for producing good usability while expressing brand and emotion quickly unearth many facets of UI and UX that in some cases may seem incompatible.
Visual Language experienced through the lens of Usability often has certain challenges.
Usability in the age of mobile devices dictates that to make something usable it must support quick and clean interactions, short attention spans and data snacking all so that the user on-the-go has the perception of ease.
Usability on a larger screen would dictate that someone may have the interface open for longer periods of time possibly even as a home page, in this case ease-of-use loosens slightly in that a non-visual and clean UI doesn’t altogether promote Brand and Emotion.
At first these two UX and UI spectrums seem at odds with one another. How can an interface support strong emotional imagery and effective branding on a small screen where clean UI and functionality are weighted with such importance?
The unified answer is in Responsive Design. In Responsiveness these two UX UI spectrums fit together rather nicely because we are able to as Designers, Developers and UX Practitioners adapt our visual language based on viewable area.
At the SharePoint 2016 Future state launch recently, a lot of these ideas and conversations bubbled to the surface of Microsoft’s presentation. We saw Microsoft unveil very clean mobile apps, with streamlined lists and UI elements strategically positioned to create strong and fast User Experiences for mobile devices. On the desktop we saw Microsoft unveil beautiful Team Sites expressing responsive design and industry adopted UI functionality that made creation of content easy for any user’s skill set.
What we didn’t see or hear was the conversation after that fact with Designers, Developers and
UX practitioners taking into account the UX methodologies that we’ve been using in SharePoint 2013 and how this will be supported in SharePoint 2016.
The good news is that all of the web standards dealing CSS3, HTML5 and Javascript still hold true and are strengthened by a more streamlined SharePoint infrastructure.
In this Blog post we’re are going to talk about SharePoint Apps and how they “Can” in a way bridge the divide between screen sizes and visual design language.
Apps or Widgets or Web Parts or Add-ins whatever their name is or was or eventually will be, doesn’t really matter but what does matter is how they can be used to help build an infrastructure of simple user satisfaction and fulfillment.
The statement “There’s an app for that…” is widely adopted and practiced in the mobile universe in that a user simply opens an app carries out data snaking and leaves.
SharePoint Apps when properly designed and developed can help facilitate brand continuity, stir emotional connections through visual language and simply put allows us to do some things that SharePoint doesn’t typically allow us to do.
SharePoint Apps have many instances in which we have a chance to interact with our users. From the App Icon in the App Store Catalog to the Home Page of The App itself or in the App as a Web Part in our pages. In each of these situations the App has different characteristics and ways to connect to users with good UX principles.
Here is an example screen grab of an App Library filled with App Icons. This screen grab is a great example of good UX through clean and efficient UI.
Based on the SharePoint Add-ins UX Design Guidelines and the actual stock PNG from the Add-Ins Visual Studio Project the App Catalog Icon should be 96px X 96px.
Which means you can actually design larger than 96x96 pixels if you keep the aspect ratio of a square and then during export scale down. Here is an example of the SharePoint App Icon Design for the Concurrency Weather App:
Notice the Visual Impact of the simple change to a custom App Icon. Where we would typically experience the UX of SharePoint out-of-the box, there is an occurrence of Brand Establishment and now we have Aesthetic Value.
SharePoint Apps also have a Home Page that serves as a place to house details, forms, or any other functionality that could serve your app in SharePoint. Think about it like an ASPX page. Here is a stock example of a SharePoint App home page:
Again the same concept as before in that Microsoft has done a really amazing job of giving us a clean design that supports legible content. The font sizes, or waterfall of the text is just the right size and is proportionally adjusted for optimal reading. We have good UX through well-established UI.
At the same time, the User Experience doesn’t express or try to create an emotional connection or raise brand awareness of any kind.
Here is the modified Design showing areas where CSS and Imagery help to support Design Continuity from the App Icon into the home page of the SharePoint App creating the persistence of visual language.