UX of leaking pipes

Pipes are leaking. How can we make users don't use the faucet?

Here are 2 of many ways to stop users from using it:
1. Prevent water from coming from the faucet
2. Prevent users open the faucet

Which one do you like better?

UI\IA notes and links

• 1) GoodUI — A great list of simple, illustrated ideas that areusually good things to do, or at least try, when designing.

  2) PatternTap — A library of user-submitted examples of all the parts of a website you might need. Note: Some are good, some are bad, but looking through examples will definitely give a sense of what is common and what isn't.

  3) The Anatomy of a Perfect Landing Page — This article isn't super new, but it still holds up. Following this will allow you to quickly create a generic, but effective page for users that find you via search. i.e. — the first page people see. If you're lovin' it, I recommend the Unbounce blog.

  4) Mobile Patterns — Similar to PatternTap, this isn't a list of perfect designs, but it is a good way to look at a lot of mobile app designs and get a sense of what is "common".

  5) Timoa on Pinterest — A very organized collection of UI elements, sorted by feature.

  (from http://thehipperelement.com/post/72691840090/daily-ux-crash-course-8-of-31)
  http://prezi.com/aafmvya6bk7t/understanding-information-architecture/
  http://journalofia.org/
  http://www.nngroup.com/reports/

#SP24 : SPOnline public site branding issues

@gusfrases presented #SP24S067 Office 365 Public Websites The Good The Bad 

the Ugly #SP24 Online conference. The ugliest part was the most attractive one.

In that part he showed the challenges and issues around branding of a SPOnline public facing site.

Here are the most prominent challenges and issues:

Mobile

No customizable device channels

Anonymous users issues

• Can't use search refiners
• No REST API (What Every Developer Needs to Know About SharePoint Apps, CSOM, and Anonymous Publishing Sites)

Workaround:

Sandbox solution

JSlink (and yes, you can do a multiple JSLinks ListView Web Part issues with JSLink and Display Templates – A solution?)

• No cache

Not a real workaround for cache issue:

 CDN for jQuery
 Client -side options for caching
 Lazy load;
 Content optimization

>> Takeaway>> NO for a Search-driven application on SPOnline public anonymous sites

Site management issue

No UI for Site columns, content types, search schema and creation of the subsite

Some default site templates are not available

Workaround:

Some features are accessible through direct links, some via SPD.

User Code Service not reliable in O365

Instead of Sandbox solution, consider JSLink when possible

>>Takeaway>> Why and why not to use SPonline for public facing sites?

*Search = OOTB Search

Resources:

Variation of the slide deck on Public Site on SPOnline limitations by @gusfraser 

Blog by Gus Frases
SPOnline Public Site with search which is possible built by Gus Frases

SharePoint UX: Styling and Branding. Design implementation

Previous related posts:

SharePoint UX: Styling and Branding. Design strategy

SharePoint UX: Styling and Branding . Do it right

Other important course on general UX: Daily UX Crash course (free and simple) 31 days in a row

Last day Kyle Schaeffer in his Styling and Branding class dove deeper into jQuery and how to use it to enhance User Experience in SharePoint portal.

Kyle said it clearly and easy to remember:


CSS is all about presentation

HTML is all about structure

JavaScript is all about behavior. (Jquery should enhance the interface but your basic structure should be functional even without jQuery)

Remember this and you design will be easy to manage.

This post is all about sharing resources that will get you started with such customization:

What to learn:

Fun resource to learn javascript, web fundamentals, jQuery

A free and recommended by Kyle book on html5

Recommended by Kyle a book to buy if a free book is not enough for you

What to do:

Pure design:

Image generator lorempixel

Text generator lipsum

Design site palette easy

Google Web Fonts

Web coding:

SharePoint blank master page starter

An example of quick jQuery magic - WP Tabify: transform a SharePoint web part zone into tabs

jQueryui - animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library

SPservices - jQuery library which abstracts SharePoint's Web Services and makes them easier to use


Do you want implement slide Image Carousel into your page?
Refer to: jQuery Cycle Plugin

The quick signposts to implement it in SharePoint:
Picture Library -> Content Query WP -> Item Style -> jQuery Script with jQuery Cycle Plugin

P.S. Item style is to change the presentation of the data

P.S.S. Not from Kyle but worth to know: Top 10 Mistakes in SharePoint 2010 Branding and UI Design

SharePoint UX: Styling and Branding. Design strategy

Previous related post:
SharePoint UX: Styling and Branding . Do it right

Kyle Schaeffer presented a nice design strategy that I couldn't resist to share with people who want:

 - prepare SharePoint implementation proposal;

 - present to the clients SharePoint custom design before implementation with less expenses;

 - come up with design solution that suits business needs and feasible to do in SharePoint.

Strategy consists of 4 phases:

1. Discover

Perception vs Expectation.  Kickoff meetings

You goal as an integrator, understand the client. 

Ask the client:

  -  Who are the users?

  -  What are they going to do?

  -  What is your goal?

Check yourself whether you understand the client.

How do you check your understanding?

Use a user persona , journaling. Use these personas for QA, during the whole project life

Example of journaling: 

Joe - a manager- does specific tasks

In QA cycle, ask clients again if "is a Joe satisfied?"

Spend some time on Information architecture 

( 50-100 users for small site -3-4 days for Information architecture)

- gather info about content

 - determine audience, users, personas

 - determine priority of content from the client's perspective

SharePoint UX: Styling and Branding . Do it right

Several weeks ago I have realized that I have been working with SharePoint last 3 years and it never occurred to me that I did nothing regarding User Experience and Design in SharePoint.

I have just accepted the things as they are in SharePoint... and I know for clients sometimes it really hurts to learn where to click to get some work done.

So, I have decided to improve life of business users who work with SharePoint via learning how to make SharePoint experience more user friendly. and I knew only one person who can help me with that - Kyle Schaeffer

This week I have got an opportunity to be in his (Dulles, VA) class SharePoint Designer 2010 Styling and Branding Week. The class is 4 days long, I have decided to take the last part - Level II:

Day 3: Working with Layouts, Styling SharePoint Components (Blogs, Wikis, MySites,Discussion Boards)

Day 4: Enhancing the User Experience with JQuery and other Advanced Techniques

Overall, the class worked for me. I have been confirmed that there are people who can do design SharePoint 2010 in the way that doesn't brake SharePoint. And also it was reaffirming to know that there is an example of successful SharePoint integration company who knows what are the strengths and weaknesses of SharePoint and willing to work with it.

I am fully aware of reservations that clients might have when they hear the word "SharePoint". They heard it's hard to customize and hard to work with.

And I can see why these opinions exist. I believe if SharePoint isn't used right it will do more harm than good not only for clients, but for company who is trying to integrate it.

So, let's do it right! Let's educate ourselves when SharePoint is appropriate and when it's not. And if it's a appropriate for SharePoint, let's integrate it in the right way... and finally let's design the sites in the way it's comfortable to users to use.

 The topic - when SharePoint is appropriate is still an open topic for me... I hope to get more insights in this area. Your suggestions are warmly welcome.

How to integrate in the right way? - I have got some experience in this sphere:
http://sharing-the-experience.blogspot.com/search/label/Best%20Practices

And lastly, how to design SharePoint - this is what next several posts are all about:

SharePoint UX: Styling and Branding. Design strategy

SharePoint UX: Styling and Branding. Design implementation

Other good links to have (for SharePoint html work):
startermasterpage.codeplex.com
http://responsivesharepoint.codeplex.com/