5. WWW.COLLAB365.EVENTS
Rule #1: Don’t Make Me Think
According to Steve Krug, websites
should be:
• Self-evident
• Obvious
• Self-explanatory
• Should not cause users
confusion or to think
6. WWW.COLLAB365.EVENTS
What Makes Users Frustrated?
• Inconsistent navigation
• Too many primary nav links
• Active links not highlighted
• Too many mouse clicks
• Can’t find what you’re
looking for
• Cluttered (balance between
text, images, whitespace)
• Too many words on page
• Left/right scrolling
• Performance (site is slow)
• Not evident whether form
was submitted successfully
• It isn’t clear what you’re
supposed to do/focus on
• Unclear error messages
8. WWW.COLLAB365.EVENTS
What is JSLink?
• A web part property that allows you to link JavaScript
file(s) to a page
• Objects that have a JSLink property:
– List Views (some exceptions, e.g. Calendar View)
– List Forms (New, Edit, View forms)
– List View and List Form web parts
– Site Column
– Content Type
10. WWW.COLLAB365.EVENTS
Setting JSLink Property in UI
• Expand the Miscellaneous
section in web part properties
• Reference to JS file must begin
with URL Token (e.g. ~site)
• Can reference multiple JS files
(separated by pipe character)
11. WWW.COLLAB365.EVENTS
URL Tokens
Token Location
~site Reference to the current SharePoint site
~sitecollection Reference to the current SharePoint site collection
~layouts Reference to the web application Layouts folder (on-premises
only) – e.g. /_layouts/15
~sitecollectionlayouts Reference to the Layouts folder in the current site collection
(on premises only) – e.g. /sites/team/_layouts/15
~sitelayouts Reference to the Layouts folder in the current site (on
premises only) – e.g. /sites/teams/subsite/_layouts/15
12. WWW.COLLAB365.EVENTS
Best Practices
• Create reusable Site Collection JS file if possible
• Avoid polluting the JS global namespace
• Call your function explicitly (not self executing)
14. WWW.COLLAB365.EVENTS
Tasks List - View
• Color code
Reminder Date
• Add a Priority icon
• Hide Priority
column header
• Color code Context
• Hide Color column
Hello and welcome to Collab365! I’m super excited to be here today talking about how you can enhance the usability of your SharePoint site with JSLink. Now typically when you think of SharePoint site usability, JSLink doesn’t come to mind! How this session came about was as I was working on my GTD Dashboard site template solution for the SPBiz conference, many of the changes I made to enhance the look & feel and usability of the template were done using JavaScript and JSLink, so I decided to expand upon that for this session.
My name is Wendy Neal, I’m from the Cedar Rapids, IA area and by trade I am a .Net and SharePoint developer, however I’d also call myself an Evangelist because I like to talk about and encourage the use of SharePoint to whoever will listen. I evangelize SharePoint on my personal blog as well as a few other industry and community websites.
I only have a couple slides on usability. The main thing I want to point out is the #1 rule of web site usability, and that is “Don’t Make Me Think”. This is also the name of a great book on usability by Steve Krug. It’s a really light read, not filled with boring usability theory or things like that. It really contains a bunch of common sense tips that, once you read it will make you say, that’s really obvious, but you may not think about every day.
What are some of the things that make web site users frustrated? This isn’t an exhaustive list, but some of the more common things that can frustrate your users, or at least make them think. And the effects can be cumulative, meaning that one small thing that frustrates a user may not seem like a big deal, but many small things will add up over time.
Now not all of these apply to the solutions that I’m going to demo later, but the ones highlighted here – Too many mouse clicks, Cluttered, Too many words on page, and Not clear what you’re supposed to focus on – I will demo how some simple JavaScript can help with these in certain situations.
Next we’re going to take a look at some pretty cool things you can do with client side scripting and JSLink.
That wraps up this session for the Collab355 conference. I know there are a lot of great sessions being presented in this timeslot, and I really appreciate you tuning in! I’m Wendy Neal, and thanks for watching!