Vinod Narayanan works with Trigent Software as Technical Lead (UI Development). Vinod has over ten years of experience in analysis, design and development, testing and implementation of web based applications. His areas of expertise include Responsive UI and SharePoint Branding.
User experience design (UXD) is the process of enhancing user satisfaction with a product by improving the usability, accessibility, and pleasure provided in the interaction with the product. User experience design encompasses traditional human–computer interaction design, and extends it by addressing all aspects of a product or service as perceived by users.
The term User Experience was coined by Donald Norman.
The general idea of user experience is Make things easy for people.
Best Practices for Web UX Design
Understand your user
Understand what they want, what they know, and what they don’t know they want. To design a successful experience, you must research your users:
Interview users
Create user stories and scenarios
Map out the customer journey
See beyond the page
Nowadays, web design requires an even broader skill-set as UX techniques mature.
Does the information architecture make sense?
For example, consistency is required in labeling for top-level and secondary navigation items.
Does the website create an emotional response?
The colors, visuals, and interaction design must all add up to hook the user into exploring the site deeper.
Is accessibility addressed correctly?
Accessible sites have real business value: they rank better in Google, and access larger audiences.
Does the text and visual content go well?
A site’s design includes all content. If the tone of the copy doesn’t match the visual style, the entire experience starts to dissolve.
Interactions remain the root of all UX
Interactions are not just about when a user clicks something on the site. The moment a user views the design, their brain processes visual interactions at the speed of thought.
Prototype early
Prototyping is the only sure way to gauge success. Usability tests at every iteration – will let you know whether you are on the right track, and what you need to change.
Device-Consistent Experiences
The only future-proof strategy is designing fluid experiences that adapt to any device.
Visual Consistency: Visual consistency ensures that site renders properly regardless of device. The same colors and graphics helps create a familiar experience wherever users log in.
Flexible Layout: When working on web designs, ensure that the layout scales appropriately. Obviously, the same site doesn’t look the same on every device. But the relative placement of menus, search functions, and key calls-to-action (like login) should match across devices. Users become accustomed to location quickly, and don’t want to relearn or switch their mental mapping.
Focus on context: Content suitable on the desktop is not always suitable for mobile. For instance, navigation can be stripped down in a mobile view to simple labels (or even shelved away in a navigation drawer), but they should certainly be fleshed out as you scale up to a tablet or desktop (e.g. horizontal or vertical menus). When you keep context in mind, you ensure that the design isn’t just consistent but also appropriate.
Responsive and Adaptive Design
Responsive Design (RWD) – Everything must be flexible: layouts, image sizes, text blocks . This flexibility, combined with smart use of CSS media queries, gives site the fluidity it needs to work on all devices.
Adaptive Design (AWD) – Design different sites for different categories of devices. Typically AWD sites have up to six variations, based on screen width: 320, 480, 760, 960, 1200, 1600
The mobile-first approach is the best strategies to create a responsive or adaptive design. Designing for the smallest screen and working your way up.
UX design checklist
Note that not all of these points apply to all products, but generally these are the ones that are most relevant.
Avoid more than three primary colors
Items on top of the visual hierarchy are the most important
Primary action is visually distinct from secondary actions
Interactive elements are not abstracted
Form submission is confirmed in a visually distinct manner
Alert messages are consistent and visually distinct
Navigation is consistent
Room for growth
No more than two distinct font families are used
Fonts used for text content are at least 12px in size
Reserve uppercase words for labels, headers, or acronyms
Different font styles or families are used to separate content from controls
Font size/weight differentiates between content types
Progress indicator for multi–step workflows
Foreground elements (like content and controls) are easily distinguished from the background
There is a huge misconception about the actual meaning behind words such as wireframe, mockup, and prototype. They are considered by most as a method to show a design.
The UI design process
The UI design process goes from wireframing to mockups to prototyping, with variation in fidelity for each stage. The prototype is interactive while the wireframe and mockup are both static. Between wireframe and mockup, the wireframe is low-fidelity while mockup is high-fidelity.
UI design different stage
Wireframe
The wireframe is the visual representation of the skeletal framework of a website. Wireframes can be a freehand drawing on a piece of paper or sketches on a whiteboard. It is the fastest way to get your idea ready for brainstorming. The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together. The wireframe lacks typographic style, color, or graphics since the main focus lies in functionality, behavior, and priority of content.
Mockup provides high-fidelity, static, design representation. They are visually more appealing, has colors, fonts, text, images, logos etc., giving it final product look-and-feel. Mockups are useful to get early buy-in from a stakeholder. They are a good feedback-gatherer.
A prototype is a simulation of the final interaction between the user and the interface. It helps users to understand how the functionalities in an application will work. Prototypes help provide proof of concept, more importantly, expose any usability flaws that are not found during the wireframes and mockups stage.
Wireframe, mockup, and prototype have their own characteristics and usage scenarios in a specific stage. How they are used depends on specific requirements.
Create cat.component.ts under Cats folder and put the following code in it:
import { Component, OnInit } from '@angular/core';
import { PetService } from '../pet.service'
import { Observable } from 'rxjs/Observable';
import { ActivatedRoute } from '@angular/router';
declare var $:any; //declartion to use jquery $
// Component class
export class CatComponent implements OnInit {
// Private properties for binding
private sub:any;
private cat:string[];
show: boolean = true;
// Private property for binding
cats: Observable<string[]>;
constructor(private petService: PetService) { }
// Load data ones componet is ready
ngOnInit() {
// Pass retreived pets to the property
this.cats = this.petService.findPets(‘cat’);
}
display(id) {
// Retrieve Pet with Id
this.petService.findPetById(id).subscribe(cat => this.cat = cat);
this.show = false;
//Mobile – Show hide listing and details
$(‘.mobile-portrait-hidden’).addClass(‘mobile-portrait-visible’);
$(‘.pet-listing’).removeClass(‘mobile-portrait-visible’).addClass(‘mobile-portrait-hidden’);
The component class extends OnInit . When it is ngOnInit method, this is overridden and is called once the component loads.
In the view (cat.html) when the user clicks on the cat’s name, the display function is called with Id of the selected cat. The Id is passed in to the PetService’s findPetById method to fetch a single pet.
this.show = true/false controls the display of ‘Select cat to get the details’ section in the view.
In mobile portrait view only the list is displayed on loading of the listing page. On clicking the name, details are displayed with ‘Return to listing’ button on the top of the details. This is achieved through jquery addClass/removeclass.
Mobile landscape view is similar to desktop view – listing and details section side-by-side. Here the pet’s image in the left is hidden due to space constraint.
Create cat.html under Cats folder and put the following code in it:
Here we are binding an observable type cat to the view and looping through it with the NgFor directive.
When the user clicks on a cat’s name, the display function is called with Id of the selected cat. The Id is passed in to the PetService’s findPetById method to fetch a single pet and details are displayed in the view.
Depending on this.show status (true/false) the section ‘Select cat to get the details’ is displayed.
The trailing .$t is as a result of the API structure and not an Angular thing.
Create cat.routes.ts under Cats folder. This contains Cat-related routes and then we import and add it to the base route:
When the browser URL for this application becomes /home, the router matches that URL to the route path /home and displays the HomeComponent after a RouterOutlet (router-outlet) that is placed in the host view’s HTML.
The RouterLink directives on the anchor tags give the router control over those elements. The navigation paths are fixed, so you can assign a string to the routerLink.
The RouterLinkActive directive on each anchor tag helps visually distinguish the anchor for the currently selected “active” route. The router adds the active CSS class to the element when the associated RouterLink becomes active.
Now run ‘npm start’ in the command prompt and see the Home page looks as expected.
PetCare Service to Get Pet Data
Create pet.service.ts file under app folder. Put the following code.
import { Injectable } from '@angular/core';
import { Jsonp, URLSearchParams } from '@angular/http';
import 'rxjs/add/operator/map';
Here class is decorated with an @Injectable decorator which tells Angular that this class is meant to be used as a provider to other components. Because of Cross-Origin Resource Sharing (CORS) issue JSONP (JavaScript Object Notation with Padding) is used instead of HTTP to make API request. JSONP supports cross-domain JavaScript requests.
The class has 3 members:
Private property which holds the base Url of the API
Method (findPets) to retrieve list of pets based on type (cat/dog)
Method (findPetById) to get details of a pet by it’s Id
URLSearchParams makes it easier to set query parameters and construct URL rather than manually concatenating.
In continuation to my earlier blog on the `Angular 2 Single Page Apps Using Routing’ blog series, in this one, I will go through the process required for creating a Home Component.
Creating Home Component
Create Home folder under app folder.
Create home.component.ts under Home folder. Put the following code in it:
The RouterLink directives on the anchor tags give the router control over those elements. The navigation paths are fixed, so you can assign a string to the routerLink.
Routing applications should add a <base> element to the index.html as the first child in the <head> tag to tell the router how to compose navigation URLs.
<base href="/">
Create base route configuration file app.routes.ts under app folder. Put the following code in it:
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from ‘./home/home.component’;
The appRoutes array of routes describes how to navigate. Pass it to the Router.forRoot method in the module imports to configure the router.
Each Route maps a URL path to a component. There are no leading slashes in the path. The router parses and builds the final URL for you, allowing you to use both relative and “absolute” paths when navigating between application views.
The empty path in the route represents the default path for the application, the place to go when the path in the URL is empty, as it typically is at the start.
Update app.module.ts to refer home.component.ts and app.routes.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from ‘./app.component’;
import { HomeComponent } from ‘./home/home.component’;
import { routing } from ‘./app.routes’;
Design Manager is a collective set of pages and functionality in SharePoint 2013 that guides users through the design process. It gives one the ability to map a local drive to a site’s Master Page Gallery and import HTML and CSS files into SharePoint. From there, SharePoint actually converts the HTML files into a Master page.
Given below are detailed steps on creating a Custom Master Page using Design Manager.
Please note that Design Manager is only available on sites with the publishing features enabled.
Step 1: Welcome
Welcome screen which display two useful links: ‘Import a design package’, and ‘Pick a pre-installed look’.
Import a design package: On this screen user can upload design package and apply the branding to the site.
Pick a pre-installed look:User is directed to ‘Change the look’ screen. On this screen the user can select suitable theme and apply.
Step 2: Manage Device Channels
This screen shows the device channels already set up on the site and gives options to set up additional device channels. Using device channels, different master pages for different devices or browsers, can be applied through the use of keywords that SharePoint looks for in a requesting browser’s user agent string.
Step 3: Upload Design Files
Here, map a network drive to Master Page Gallery (/_catalogs/masterpage/) and move all branding assets into the SharePoint site.
MAPPING A NETWORK DRIVE TO THE MASTER PAGE GALLERY
Depending on your version of Windows, the steps to start mapping a drive are slightly different:
Note: Internet Explorer users, right-click the link and select ‘Properties’. Copy the location displayed beside Address (URL).
Copy the URL provided in step 3 of the Design Manager (marked ‘1’ in above image).
– In Windows 7 or Windows Server 2008/2008 R2, click Start > right-click Computer > map network drive
– In Windows 8 or Windows Server 2012, open the Start Screen, type Computer. Right-click Computer and select Map Network Drive
Choose your drive letter
Paste the URL you copied from the Design Manager into the Folder field
Select whether you want the drive to reconnect at logon. Click Finish and Windows Explorer opens and displays the contents of the Master Page Gallery in all its glory.
In the previous versions of SharePoint, master pages and page layouts were placed in the Master Page Gallery and custom CSS, images, and scripts in the Style Library or other document library. In SharePoint 2013, all branding assets CSS, images, scripts, master pages, and page layouts are placed in the Master Page Gallery.
Create a new folder within the mapped Master Page Gallery and copy all the branding assets into this folder.
If you are using SharePoint Designer 2013, follow the below steps:
Open the site
Select ‘All files’ from left navigation
Navigate to _catalogs > masterpage folder
Create new folder to hold all the branding assets [Example folder name ‘Trigent’]
Copy paste the files into this folder
Step 4: Edit Master Pages
Here are options for converting an HTML file to a master page, or creating a blank starter master page. Below that, there are two master page files (oslo.master and seattle.master, SharePoint 2013’s out-of-the-box master pages) that have successfully converted.
CONVERTING AN HTML FILE TO A MASTER PAGE:
Click Convert an HTML file to a SharePoint master page.
In the Select an Asset dialog, browse to your Trigent folder within the Master Page Gallery, and select the Trigent2013.html file. The Location (URL) field at the bottom of the Select an Asset dialog shows the filename of the selected file
Click the Insert button.
After a few seconds the Design Manager refreshes, your Trigent2013 file is listed, and its status reads Conversion Successful.
If for some reason your conversion is unsuccessful, you’ll receive a status of Warnings and Errors. If you click the Warnings and Errors link, SharePoint will try to point out where you went wrong.
Generally, it’s due to malformed HTML. Because SharePoint parses through the document, your HTML needs to be XML compliant—make sure tags are closed in the proper order and tag properties are properly enclosed in quotes; and just generally make sure your HTML has the correct syntax.
Your DOCTYPE needs to be listed in all uppercase letters.
Don’t include any <form> tags in your HTML document; SharePoint adds a form automatically during the conversion.
On successful conversion, click the Trigent2013 filename and you can see a preview of your master page.
MOVING A CONTENT PLACEHOLDER
When creating your own HTML design, you might find it helpful to add a comment to the beginning of the content that will be a page layout and another comment at the end like <!– START Page Mid Content –> to <!– END Page Mid Content –>, so it’s easy to discern where you will move the placeholder at this point.
For this example assume there are 3 sections header, mid content & footer.
Opened Trigent2013.html from the mapped drive in HTML editor. You should also see a corresponding Trigent2013.master file, but you’ll only be working with the HTML file. SharePoint automatically updates the master page file with any changes you make in the HTML file. If you don’t see the master page file, you may just need to refresh the Windows Explorer window by pressing F5.
Assuming the mid content div (<div class=”mid-content”></div>) tag is placed between comments <!– START Page Mid Content –> to <!– END Page Mid Content –>, select all the content inside mid content div tag.
Cut (Ctrl+X) these lines from the HTML file. (Don’t delete them!) Create a new page in HTML editor and paste (Ctrl+V) the lines in the HTML for later.
Save the Trigent2013.html file, and switch back to the preview of your master page in the browser. On refresh you should see the master page with the empty mid content.
Now its time to move the placeholder into the mid content area of the page. Scroll to the bottom of the HTML and find the following block of code.
<div data-name="ContentPlaceHolderMain">
<!--CS: Start PlaceHolderMain Snippet-->
<!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls"
Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c"%>-->
<!--MS:<SharePoint:AjaxDelta ID="DeltaPlaceHolderMain" IsMainContent="true" runat="server">-->
<!--MS:<asp:ContentPlaceHolder ID="PlaceHolderMain"
runat="server">-->
<div class="DefaultContentBlock" style="border:medium black solid;
background:yellow; color:black; margin:20px; padding:10px;">
This div, which you should delete, represents the content area that your Page Layouts and pages will fill. Design your Master Page around this content placeholder.
</div>
<!--ME:</asp:ContentPlaceHolder>-->
<!--ME:</SharePoint:AjaxDelta>-->
<!--CE: End PlaceHolderMain Snippet-->
</div>
Cut this code from the HTML (Ctrl+X) and place the cursor within the <div class=”mid-content”></div> tags. Press Enter to create an empty line between the opening <div> and closing </div>.
Paste the code snippet (Ctrl+V) in the empty line between the mid-content div tags. Save Trigent2013.html. The preview should update with the yellow block in the mid content area.
Delete the text and yellow box this is simply to help you locate the div to position it properly. Select and delete the following content
<div class="DefaultContentBlock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;">
This div, which you should delete, represents the content area that your Page Layouts and pages will fill. Design your Master Page around this content placeholder.
</div>
Save Trigent2013.html and return to the browser and refresh the master page preview. You should see your master page with an empty mid content area.
ADDING SNIPPETS TO A MASTER PAGE
The Snippet Gallery is a collection of code snippets for various pieces of SharePoint functionality that you can use in your master page. Each snippet is found on the gallery’s ribbon. On selecting the snippet display the actual snippet of code that you can copy and paste into your master page, and an expanding accordion set of options that you can use to make changes to the code snippet if you want.
There are actually two versions of the Snippet Gallery: one for master pages and one for page layouts.
Snippets link is present at the upper-right corner of the page, above the ribbon preview. The Snippet Gallery opens in a new browser tab, so you can easily switch back and forth between the gallery and the master page preview.
EXAMPLE: REPLACING PLACEHOLDER SITE LOGO WITH SHAREPOINT SITE LOGO SNIPPET
Switch to the Snippet Gallery and click the Site Logo snippet in the ribbon.
Scroll down the page to the Customization – Site Logo (SPSimpleSiteLink) section and click the Appearance header to expand it. In the CssClass properties, replace the default text, ms-siteicon-a, with logo.
Still in the Customization – Site Logo (SPSimpleSiteLink) section, expand the Navigation section and in the NavigateUrl field, type ~sitecollection/.
In the Customization – Site Logo (SiteLogoImage) section, expand the Appearance section and delete the default text from the CssClass field. Then expand the Misc section, and in the LogoImageUrl field, replace the default URL in the field with /_catalogs/masterpage/trigent/logo.png.
Scroll up and click the Update button, then select and copy the HTML snippet.
Replace the HTML with the Site Logo snippet you just copied
Save Trigent2013.html, return to the master page preview in the browser, and refresh. The site logo should look exactly the same as it did before.
Step 5: Edit Display Templates
Used for displaying search results and data. The Design Manager provides you with a view into the display templates folder in the Master Page Gallery, so you can see the available templates that can be used as a starting point for creating any custom template you want.
Step 6: Edit Page Layouts
Page layouts are basically layout templates for displaying content on each page in SharePoint. All publishing pages are based on a page layout, and each page layout is based on a content type.
Creating custom page layouts will be discussed in detail in the next blog.
Step 7: Publish and Apply Design
Here you will publish your design assets, page layout, and master page. Then you’ll apply the master page to the site.
PUBLISHING DESIGN FILES
Click the link Go to the Master Page Gallery. The Master Page Gallery opens in a new browser tab.
Click the Trigent folder to display its contents and put a check in the box that appears next to the Trigent2013.html file when you hover over the filename.
On the ribbon, click the Files tab; then click the Publish button toward the right side.
In the dialog that opens, optionally type a comment in the Comments field; then click OK to publish your master page. SharePoint automatically publishes the corresponding Trigent2013.master file.
There’s no way to mass publish all the items in this folder from within the Master Page Gallery. We have to take different approach click the Settings menu > Site settings.
Under the Site Administration header, click Content and Structure to open the Content and Structure manager.
In the left pane of the Content and Structure page, click the + next to Master Page Gallery. Then click the Trigent folder to display its contents in the main window of the page.
At the top of the main body, click the icon of stacked check boxes to select all items in the folder.
Click the Actions drop-down in the toolbar, and select Publish. In the dialog that appears, optionally type a comment, and then click OK. This publishes all items in the Trigent folder.
Select each sub folders in Trigent folder and repeat the publish process for the items in each folder.
When everything is published, click the Back to ‘[Site name]’ link in the upper left of the Content and Structure window to return to your site.
APPLY YOUR CUSTOM MASTER PAGE TO THE SITE
Return to the Design Manager tab in the browser.
Still on step 7, click the link Assign Master Pages to Your Site Based on Device Channels. This opens the Master Page Settings in a dialog.
For the Default drop-down, select trigent/trigent2013. Change the System Master Page setting drop-down to trigent/trigent2013. Click OK to apply your custom master page to your site.
System master page setting applies the selected master page to all page types, including settings pages.
Step 8: Create Design Package
A design package is a Windows Solution Package (WSP), sometimes called a SharePoint Solution, which contains your custom branding assets from the site and instructions on where those assets should be deployed. When a design is packaged up in a WSP, it can be imported to other SharePoint sites or farms, and the custom branding you’ve built can be applied to other sites.
CREATING A DESIGN PACKAGE
In the Design Name field, SharePoint has provided a name for you; it uses the site’s name by default. You can change it if you want. This becomes part of the filename for the design package. The other part is the version number of the design that appears directly under the name field.
You have the option to include the site’s search configuration in the design package. This can be useful if you’ve spent some time customizing the search experience in the site with custom query rules, result types, result sources, and other search-related assets.
Click Create to create your design package. You see a message that SharePoint is working on creating the package, and after a few moments, the Design Manager reappears with a link underneath the Create button.
Click the download link Your package is ready save your WSP to your computer for importing into another site. Save your WSP file to a location on your computer, such as your desktop.
As most of us already know, Responsive Web design (RWD) is an approach by which a website is rendered seamlessly when users switch from their respective desktops/ laptops to handheld devices (mobile or tablet). This is achieved by using flexible grid-based layout and media with intelligent use of CSS media queries.
Given below are some best practices to maximize the benefits of RWD:
Navigation menus
Navigation is one of the most important aspect of any website. On smaller screens, hiding the main navigation menu is a good approach.An icon, text or combination of both indicates the location of the menu.On smaller screens, the menu is displayed as a simple drop down menu, where the menu slides down and pushes the main content or is displayed as overlay covering the whole screen. If the menu items are more with multiple levels, then push menu is a good option.
Large button links and clickable areas
Large buttons improve usability. For example, in the announcement list, instead of having “Read more” link for each list item, it is better to make each announcement to block a link, so that the user can click anywhere.
Font size
The selected font should be readable and maintain the overall feel whether you scale or shrink it.The size ratio between headers and paragraph text should be well balanced.Include adequate contrast to the text, versus the background color and the color of links versus the rest of the site’s content.Also, have bigger fonts and avoid forcing the average user to zoom in.
Use less images
A recent trend has been to have gigantic screen spanning images, which increase the file size of a page. There should be a good balance between rich visuals and the overall page performance. Effects like background gradients and button hover states, can be achieved by pure Cascading Style Sheets (CSS). For mobiles, especially, this helps to load pages faster.Use fonts for your icons instead of creating images. They are scalable, have cleaner edges, load faster, and are good for retina displays. This optimization works great across devices and screens.
Important information at the top in mobile
For mobile devices, it is important to place information such as telephone numbers, contact info, ‘buy now’ call to actions etc. right on top. For example, on an e-commerce website, showing the shopping cart at the top, is a better option than placing it elsewhere on the page.
Prioritize Content Differently
When moving from larger screen displays to very small screens, different layout approaches are required. One of the approaches is to show important information in a section and hide less important portions of the section. Below is an illustration of the same content on a desktop and a mobile device.
Right Reading Width
Avoid lengthy text, because it is difficult to read. At the same time avoid very short text lengths, as this tends to break the rhythm of reading. A common practice is to keep line lengths at about 60-75 characters as the line height also contributes to a good reading experience.
Input Methods
Desktop users use mouse/keyboard to navigate and enter information. But it is a very different experience for touch screen device users to input all information with their fingers. So make the form controls and button size bigger, and have larger clickable areas.
Let content determine breakpoints An older approach in responsive design was to use device sizes to determine breakpoints – e.g. 320px (iPhone portrait), 480px (iPhone landscape), and so on. The problem with this approach is that the device landscape is constantly changing, and today’s breakpoint values are likely to get outdated quickly. A better approach is to adjust the breakpoints appropriately based on when the layout breaks.For example, if the navigation bar on your website has five items and this looks bad past a smaller width, then use that as a breakpoint.
Test on Actual Devices for Usability Issues Ask some users to test the design on the actual devices for usability issues. Based on the test results make improvements or fix the issues in the design.
Explore latest tech trends & insights in your industry
