good page on mixing Razor engine with webforms (aspx):

http://www.eworldui.net/blog/post/2011/01/07/Using-Razor-Pages-with-WebForms-Master-Pages.aspx

It's a bit of work-around, but if you gotta, you gotta.

Mastery

Some good quotes on mastery from Sarah Lewis

Mastery is about valuing your own opinion of what you're doing more than anyone else's opinion.

The drive for mastery is very different than the drive for success.

http://www.amazon.com/gp/aw/d/B00DPM80AC/ref=tmm_kin_title_0

http://www.ted.com/talks/sarah_lewis_embrace_the_near_win

Notes from tDoET Part 1

Reading "The Design of Everyday Things", too long for blog post titles so I'll be using the short version from this blog title.  Here are the notes from chapter 1.

Two of the most important aspects of good design are discoverability and understanding.  Discoverability: is it possible to even figure out what actions are possible and where and how to perform them?  Understanding: What does it all mean? How is the product supposed to be used?  What do all the different controls and settings mean?

 Design is concerned with how things work, how they are controlled, and the nature of the interaction between people and technology.

 ...we must design our machines on the assumption that people will make errors.

Good design requires good communication, especially from machine to person, indicating what actions are possible, what is happening, and what is about to happen.  Communication is especially important when things go wrong. [...] Designers need to focus their attention on the cases where things go wrong, not just on when things work a planned.

Human centered design [starts with] a good understanding of people and the needs the design is intended to meet.  This understanding comes about primarily through observation, for people themselves are often unaware of their true needs, even unaware of the difficulties they are encountering.  Getting the specification of the thing to be defined is one of the most difficult parts of the design, so much so that the HCD principle is to avoid specifying the problem as long as possible but instead to iterate upon repeated approximations.  This is done through rapid tests of ideas, and after each test modifying the approach and the problem definition.

Experience (feeling, emotions, subjective stuff) is critical, for it determines how fondly people remember their interactions.  [...] Cognition and emotion are tightly intertwined [with experience], which means that the designers must design with both in mind.

Five fundamental psychological concepts: affordances, signifiers, constraints, mappings, and feedback.  There is a sixth principle that is perhaps the most important of all:  the conceptual model of the system.  It is the conceptual model that provides true understanding.

 Affordances

The presence of an affordance is jointly determined by the qualities of the object and the abilities of the agent that is interacting (emphasis mine).  [... An] affordance is not a property.  An affordance is a relationship

If an affordance or anti-affordance cannot be perceived, some means of signaling its presence is required.

Signifiers

Affordances determine what actions are possible.  Signifiers communicate where the action should take place.  We need both. [...] Good design requires, among other things, good communication of the purpose, structure, and operation of the device to the people who use it. 

The signifier is an important communication device to the recipient, whether or not communication was intended. 

Affordances represent the possibilities in the world for how an agent can interact with something.  Signifiers are signals. 

Signifiers signal things, in particular what actions are possible and how they should be done.  Signifiers must be perceivable, else they fail to function.
In design, signifiers are more important than affordances, for they communicate how to use the design.
[...] afordances and signifiers are fundamentally important principles of good design.

Mapping

The relationship between a control and its results is easiest to learn wherever there is an understandable mapping between the controls, the actions, and the intended result.   

A device is easy to use when the set of possible actions is visible, when the controls and displays exploit natural mappings.  The principles are simple but rarely incorporated into design.  Good design takes care, planning, though, and an understanding of how people behave.

Feedback 

Feedback - communicating the results of an action - is a well known concept from the science of control and information theory. 

Feedback must be immediate: even a delay of a tenth of a second can be disconcerting.  If the delay is too long, people often give up, going off to do other activities.  [...]  Feedback must also be informative. 

Poor feedback can be worse than no feedback at all, because it is distracting, uninformative, and in many cases irritating and anxiety-provoking.  [...] Feedback is essential, but not when it gets in the way of other things, including a calm and relaxing environment. 

Feedback has to be planned.  All actions need to be confirmed, but in a manner that is unobtrusive.  Feedback must also be prioritized, so that unimportant information is presented in an unobtrusive fashion, but important signals are presented in a way that does capture attention

Conceptual Models

A conceptual model is an explanation, usually highly simplified, of how something works.  It doesn't have to be complete or even accurate as long as it is useful (emphasis mine) 

Simplified models are valuable only as long as the assumptions that support them hold true.  There are often multiple conceptual models of a product or device. 

There is no need to understand the underlying physics or chemistry of each device we own, just the relationship between the controls and the outcomes. 

The combined information available to us is the system image.  When the system image is incoherent or inappropriate, then the user cannot easily use the device.  If it is incomplete or contradictory, there will be trouble. 

Good conceptual models are the key to understandable, enjoyable products:  good communication is the key to good conceptual models. 

The same technology that simplifies life by providing more functions in each device also complicates life by making the device harder to learn, harder to use.  This is the paradox of technology, and the challenge for the designer.

I don't know

Three words we all need to make sure stay in our vocabulary.  I have recently listened to a NPR TED Radio Hour podcast about saying "I don't know" (sorry, but I can't find the link right now, I'll put it in if I do find it) Freakonomics podcast, a .Net Rocks podcast and a Hanselminutes podcast on the same topic.  In this field you should always be learning, and in order to learn, you have to be able to admit there are things that you don't know.  There are always things that you don't know, whether you admit it to yourself and others or not.  And that's a good thing, it means there's always more to learn.

In that spirit, I've been hearing more and more about functional programming and it's benefits, and I admit it's a topic I don't know about.  But I want to, so I'm going to go learn.  So here are some link's I'm going to get started with, and I hope I've encouraged someone out there to go learn as well.

http://en.wikipedia.org/wiki/Functional_programming
http://www.tryfsharp.org/
http://www.erlang.org/
http://www.haskell.org/haskellwiki/Haskell
http://elixir-lang.org/
http://clojure.org/

Review and notes from "Don't Make Me Think": Part 4

Don't Make Me Think: Part 4

all Web users are unique, and all Web use is basically idiosyncratic.

There is no "average" or "typical" user.  Everyone is on the web to accomplish their specific task at the time.  You need to facilitate your web sites function.  Don't try to figure out what people "like" or "dislike".  Everyone is different, use what works best for the functionality of your web site.

 The problem is there are no simple "right" answers for most Web design questions (at least not for the important ones).  What works is good, integrated design that fills a need - carefully thought out, well executed, and tested.  [...]  The right kind of question to ask is "Does this pulldown, with theses items and this wording in this context on this page create a good experience for most people who are likely to use this site?

Don't forget the tested part.  And not tested by you, or marketing, or QA, tested by a range of different users.  Take note of the specificity of the wording of the "right" kind of question.  What works on one page of your site very well may not work on another page, or even on the same page in a different context.  These are all things you need to think about and design around.  And Test.  And then Test some more.

[...] testing tends to defuse arguments and break impasses by moving the discussion away from the realm of what's right or wrong and into the realm of what works or doesn't work. [...] The point of testing is not to prove or disprove something.  It's to inform your judgement.  

Emphasis is mine.  Remember that everyone will have an opinion on what they think the "right" way to present something is.  Some people like dropdowns, some people hate them.  What matters is does the dropdown work where it's being used.

 Don't make me jump through hoops just because you don't want to write a little bit of code.

 I think the most prevalent place I see this is for searching, where the user is forced to select what type of search they want from a dropdown or radio list.  Don't make me pick, figure out what I'm searching for.  If you can't figure it out, search everything.

Just when you think you're done, a cat floats by with buttered toast strapped to its back.

I love this quote, the explanation for it is this:

When a cat is dropped, it always lands on its feet
and when toast is dropped, it always lands with the buttered side facing down.
I propose to strap buttered toast to the back of a cat; the two will hover, spinning, inches above the ground
With a giant buttered-cat array, a high speed monorail could easily link New York with Chicago
-John Frazee - The Journal of Irreproducible Results

The best way to learn how to make anything more usable is to watch people actually trying to use it.

Seems self evident.  How many of us actually do it?  That is why user testing is stressed so much in the book, and in my summary.  If you don't watch the people using your site, you don't know how they are using it.
One note I found very useful on accessibility:

with CSS you can put your content in sequential order in the source file - which is how a screen reader user will hear it -  and still position things where you want them on the page.

If you want your site to be accessible, don't forget to include users that are going to use screen readers, high contrast color schemes, etc. in your group of testers.

That's it, I hope you enjoyed the review, and I hope you go read the full book, it is definitely worth the time investment.  It is a reasonably short book, and translates pretty well onto the kindle, though you might have trouble reading text on some of the images.

Previous article in series

Review and notes from "Don't Make Me Think": Part 3

Don't Make Me Think: Part 3

Don goes into lots of detail on searching, but most of it basically boils down to this:  have a search box, have it on every page, and make it search everything.  Don't give me options on what to search by, or ways to scope the results.  Search the site, and give me all the results.  If I need to narrow the results allow me to do it after I have them.  Don't pretty it up, don't use fancy working.  Search, a box, and a button.

Every page needs a name. [...] The name needs to be in the right place.  The page name should appear to be framing the content that is unique to this page. [...] The name needs to be prominent. [...]  The name needs to match what I clicked. [...]  every site makes an implicit social contract with its visitors:  The name of the page will match the words I clicked to get there.

I'm not personally sold on this, but I defer to Don's judgement here.  Personally I don't really care what the name of each web page is, but I'm not a normal web user either (who is though?).  Don provides his research results for most of his reasoning, but not here.

Tabs are one of the very few cases where using a physical metaphor in a user interface actually works. [...] For tabs to work to full effect, the graphics have to create the visual illusion that the active tab is in front of the other tabs.  [...] To create this illusion, the active tab needs to be a different color or contrasting shade, and it has to physically connect with the space below it.

Seems pretty self evident to me, just make sure your tab background color matches the page color, and that there are no lines between the active tab and the page.

This one seems marginal at best to me because of the banner there between the tab heading and the tab content.


This one is even worse because the tab color is not the same as the page, and it has a line between the tab and the page:

This is what you should be shooting for, active tab color different, directly connected to the page, and same as the background of the page.

Home pages:

As quickly and clearly as possible, the Home page needs to answer the four questions I have in my head when I enter a new site for the first time:

1. What is this?
2. What do they have here?
3. What can I do here?
4. Why should I be here, and not somewhere else?

I need to be able to answer these questions at a glance, correctly and unambiguously, with very little effort.

[...] The fifth question: Where do I start?

I paraphrased the following, but these are his categories he says the user should be able to answer for starting a process.  The last question may be unimportant if you're not running an e-commerce site.

1. Where do I start if I want to search?
2. Where do I start if I want to browse?
3. Where do I look for their best stuff?

Seems self evident to me.  Just keep those four questions in mind.  Unfortunately the hard part is going to be making this clear and unambiguous.  Like adding more text than needed, everyone wants a piece of that home page.

previous article in the series | next article in the series

Review and notes from "Don't Make Me Think": Part 2

Don't Make Me Think: Part 2

If your audience is going to act like you're designing billboards, then design great billboards. [...] There are five important things you can do to to make sure they see, and understand, as much of your site as possible:

• Create a clear visual heirarchy on each page
• Take advantage of conventions
• Break pages up into clearly defined areas
• Make it obvious what's clickable
• Minimize Noise

The first part of this is self explanatory, give your users what they want. Don goes into more details on each of the five points, I will summarize.  1. Make sure the appearance of the things clearly and accurately portray the relationships.  The more important something is, the more prominent it should be.  Things that are related logically should also be related visually.  Things are nested visually should show what is part of what.

A good visual hierarchy saves us work by preprocessing the page for us, organizing and prioritizing its contents in a  way that we can grasp almost instantly.

 This reduces how much the user has to think in order to figure out what's going on, and doesn't drain their good will reserve.

The publisher knows better than anyone which pieces of the site's content are most important, valuable, or popular, so why not identify them for me and save me the trouble.

I don't necessarily agree with this statement.  I think that the publisher can make an initial assumption about which things would be more important, but without any data to support them, it's just that, an assumption.  You should track what the users use and make the things they actually use more prominent, not the things you assume they use.  This may take more than just click data, you may need to track where they're looking as well.  They may be using that jumbotron to figure out where to click next, and without it they may go down a completely different path.

Please don't try to come up with your own conventions.  Underline your links.  Make your buttons look like buttons.  If you're going to break with the conventions you better have a really good reason, and perform lots of testing to make sure your new method works.

Use your whitespace, breaking things into clearly separate areas means you're going to have to have whitespace.  Users know how to scroll now, they will look below "the fold".  Don't crowd your site with ads, flashy animations, scrolling text, etc.  That's noise the user has to process, and it's distracting.

Omit needless words.  Vigorous writing is concise.  A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.

This, to me as a developer, is self-evident, but you will probably be fighting for this on all fronts.  Marketing will want more descriptive words.  Designers will want more descriptive words.  The CEO will want more Pizzaz.  These requests will come from everywhere, be prepared to constantly fight them.

Your objective should always be to eliminate instructions entirely by making everything self explanatory, or as close to it as possible.  When instructions are absolutely necessary, cut them back to the bare minimum.

People know how to fill out a form.  They know what textboxes and dropdowns are, they know how to use radio buttons.  Don't provide them with instructions they're not going to read, they're only going to create distractions.  If something is causing a problem, figure out what is causing the problem and provide help then (show a tooltip for empty textboxes the user has been hovering over or has selected for long periods of time, etc.).

I'm going to put these next two quotes out of order from the book, I think they flow better this way:

Clear, well-thought-out navigation is one of the best opportunities a site has to create a good impression. 

If the navigation is doing is job, it tells you implicitly where to begin and what your options are.  Done correctly, it should be all the instructions you need. 

Just having the navigation appear in the same place on every page with a consistent look gives you instant confirmation that you're still in the same site.

Don devotes a whole chapter to navigation, that's how important he feels it is, and I agree with him.  Making a site easily navigable is one of the most important things to get right.  One thing that Don overlooks in the book is that web sites and applications aren't books, and you can have more than one way to get to a particular screen.  If half your users look for a screen using one navigation path, and half use another, put it under both.

Previous article in the series | Next article in the series

Review and notes from "Don't Make Me Think": Part 1

Don't Make Me Think: Part 1

You don't need to know everything.  As with any field, there's a lot you could learn about usability.  But unless you're a usability professional, there's a limit to how much is useful to learn.

This is important, as a developer (as I assume most people reading this blog are) keep in mind the Pareto principle and how much additional effort you want to put into learning that extra little bit of usability, and if you could put that time to better use somewhere else.

... there is no one "right" way to design web sites.  It's a complicated process and the real answer to most of the questions that people ask me is "It depends."

I think we as developers are used to giving the "it depends" answer, but it's good to keep in mind that this goes for usability as well.  There are basic usability guidelines that you should be following, but sometimes there are reasons to break them, you just need to make sure that you have a good reason for breaking them, and that your design is still usable.

Using a site that doesn't make us think about unimportant things feels effortless...

This is a great line, and ties in well with a concept Steve goes into great detail on later on, that of a "good will" reserve that users have.  When you make it effortless to use a site, you aren't tapping into that reserve, and if you do it right you may even start refilling it.  Be aware that users may not always come to your site with their good will reserve full, and that different people have different levels of reserve.

...most people are going to spend far less time looking at the pages we design than we'd like to think.

As a result, if web pages are going to be effective, they have to work most of their magic at a glance.

Something I hope we're all familiar with, the KISS principle, seems to me to apply well here.  The easier you can make it for a user to figure out what is going on, the more they will like your site.  If you confuse them by putting ads or some content you really want the to see in a place they normally expect to see menus, or a login area, or the site logo you're going to rapidly deplete that good will reserve.

We don't read pages.  We scan them.

What this means is that if you make something unnecessarily complicated, or make it hard for the user to find locations of things, you're making them think when they shouldn't have to.  Make your buttons obvious, your links underlined, don't underline things that aren't links (highlight it some other way, there are enough of them that you don't have to overload the hyperlink indicator).  A user is not going to read your instructions before they try something the first time, so try to make it so they don't have to.

We don't make optimal choices.  We satisfice. [...] most of the time we don't chose the best option - we choose the first reasonable option, a strategy known as satisficing

This is further explained in the book, and I'll try to paraphrase and shorten the explanation to this:  People don't take into account all the options they have available based on the data they have.  They select the first option that seems reasonable to them.  So try to make the first option a user has the most reasonable one based on what they user is trying to do.

We don't figure out how things work.  We muddle through.

[...] Faced with any sort of technology, very few people take the time to read instructions.  Instead, we forge ahead and muddle through, making up our own vaguely plausible stories about what we're doing and why it works.

[...]If we find something that works, we stick to it.

This goes hand in hand with satisficing.  People are going to select the first reasonable option, and if they can muddle through and get that one to work then that's what they're going to do.  They're probably going to keep with that option and not even look for a better solution.  Only when someone shows them a better way to do something will they then start using it.  I think this would be a good reason to have some way of capturing how users are actually using your site, and to look at it, because how they use it will surprise you.  If you see a large fraction of them using a site in some manner where you know there is a more effective way to use it you should then try to notify those people of this better method when you see they are using the less optimal one, because they aren't going to go find it for themselves.  It's also probably not wise to make their old method unavailable, lots of people are resistant to changing.

I think that's enough for one post.  I've actually finished reading the book, and it is very good, I highly recommend it.  It is short, sweet, and to the point.

Next article in the series

2013 VS Live Keynote

I went back and watched Billy Hollis' VS Live 2013 keynote, it's more about technology in general and not just UI Design, but it's still a good listen, here are my notes:


First thing to learn about a new technology is how to make your users more productive.
Don't uncritically accept anything you're told

Many thought leaders seem out of touch

• Lack of focus on users and businesses
• Hyperfocus on code and process
• Contempt for GrD developers
• False dichotomy

Be skeptical of gurus
Be really skeptical of one-size-fits-all answers
Be flexible instead of dogmatic
Decide if things work for your business and your users
Use what works for you, but be open to change
Cloud, better UX
Kick your addiction
Embrace diversity


Survival in a rapidly changing ecosystem depends on diversity

• More diverse teams
• More diverse technologies
• Experimental design to produce diverse solutions to problems

Hire people on your team that think differently than you do

This one is the kicker
The cloud is going to change our world as much as the PC changed the mainframe world

UI Design Resources

Graphic design theory

• Graphic Design Theory: Readings from the Field
• Design Elements: Graphic Style Manual
• Universal Principles of Design

Layout

• Making and Breaking the Grid
• Ordering Disorder: Grid Principles for Web Design

Typography

• Elements of Typographic Style
• Thinking with Type
• New TypographyWarning:make sure you keep the historic context in mind while reading this one

Psychology & Cognitive Science

• Influence: The Psychology of Persuasion
• Thinking, Fast and Slow
• Blink: The Power of Thinking Without Thinking

User experience

• The Design of Everyday Things
• Seductive Interaction Design
• 100 Things Every Designer Needs to Know About People
• Designing for Emotion
• "The Design of Everyday Things" - Donald Norman
• "Universal Principles of Design" - William Lidwell et.al.
• "A Whole New Mind" - Daniel Pink
• "Sketching User Experiences" - Bill Buxton
• "Drawing on the Right Side of the Brain" - Betty Edwards
• "Designing with the Mind in Mind" - Jeff Johnson
• "About Face: The Essentials of Interaction Design" - Alan Cooper

• The Whole Brain Developer - BASTA keynote. 2011
• Demonstration of StaffLynx (8 minutes)
• Introduction to XAML for Developers. Part One (Video instruction from Billy)
• Introduction to XAML for Developers. Part Two (Video instruction from Billy)
• XAML Colors. Brushes. Images. and Opacity (Video instruction from Billy)
• Bill Buxton's keynote at MIX 2010 (video)
• UI Patterns site on Yahoo (oriented around HTML UI instead of XAML. but still a good resource)
• Quince UI Patterns site (sponsored by Infragistics)
• http://visualstudiomagazine.com/blogs/vs-live-video/2013/12/billy-hollis-keynote.aspx
• Kuler.adobe.com
• Colorschemer.com/schemes

Here's the quick run-down on Billy Hollis' design course

Billy Hollis' course

 Proliferation of devices with new interfaces, i.e. touch, gesture, voice are changing the expectations of users and we need to adapt to meet those expectations.  Do more, our job is now to make the users job easier.

Learn from real-world examples, both good and bad, this will help with awareness of archetypes that users are familiar with (raised buttons, round buttons, etc).  Gestalt, Fitts Law, Pareto Principle, and Hicks Law.

Exercise your right brain, practice doing design, all you need is pen and paper.  Learning to draw and learning to play music help with this as well.

Keep aware of the limitations and functioning of the human visual system, limited high resolution area and the pre-processing done by our brains on what we see.  Whitespace is critically important, don't crowd the users visual input, the old saying that screen real estate is valuable no longer applies.   This is driven by our evolution and where our species "grew up", on the savannah, and it affects both this functionality and our sense of aesthetics.  Wide open, green field landscapes with water somewhere in the background is almost universally found to be beautiful.  A beautiful design will be considered more usable by the the user, and they will be more willing to forgive a beautiful app than an ugly one.

Don't misuse your tools: Color gradients, animations, fading, these should all be unnoticed by the user, meaning if you use them correctly the user will prefer your design to one that is monotone, and doesn't move naturally, but really won't be able to say why.

Help to reduce the cognitive load placed on the user, don't make them think any more than absolutely necessary.  Keep number of choices to a minimum, make use of progressive disclosure, mapping, design affordances and entry points to help the user use the software.  Also remember that simplicity is a goal, so choose the simplest correct design.

Users vastly outnumber developers, it's worth a lot of effort to save the users even a little bit of time.  However, the user is not always right.  Sometimes what an application needs to be most effective for the business does not match up with what the users like.  Do your best to take their wishes into account as long as that doesn't compromise other success factors. Vocal users will push for more features.  Be careful suggesting features to users, if you suggest it, someone will want it, even if it's not good design.  Simply adding features to please various people risks bad design.  Every feature has a cost, and no design is ever perfect, your goal is to be good enough.

These are guidelines.  Context can change what is important, don't be dogmatic in applying the design principles.  Form follows function - good design will match the users need and tends to have an elegant feel.  When re-desiging apply the MAYA principle, most advanced yet acceptale design.  Trimming around the edges never works out well, if you don't get a certain level of change, and finding the proper level is difficult, then inertia from the old design may cause issues with adoption.


Remember that during periods of transition (which we are definitely in now, and we may never leave again) you have to make the effort to push into new territory or the shelf life of your design may well be too short.


For a more in depth look at the course see these blog posts:

http://programmingonslaught.blogspot.com/2014/05/notes-from-creating-user-experiences.html
http://programmingonslaught.blogspot.com/2014/05/creating-user-experiences-fundamental.html
http://programmingonslaught.blogspot.com/2014/05/creating-user-experiences-fundamental_15.html
http://programmingonslaught.blogspot.com/2014/05/creating-user-experiences-fundamental_16.html
http://programmingonslaught.blogspot.com/2014/05/creating-user-experiences-fundamental_17.html
http://programmingonslaught.blogspot.com/2014/05/creating-user-experiences-fundamental_19.html
http://programmingonslaught.blogspot.com/2014/05/creating-user-experiences-fundamental_20.html

Overall, this is a great introductory video for developers who are looking into improving their knowledge of design.  Applying the Pareto principle, this will probably make you better than 80% (maybe even 90%) of the other developers out there at design.

Next up I'm going to be reviewing the videos and books Billy kindly provides as resources on his web site and in the video.

Thanks Billy, and I look forward to hopefully seeing more from you on UI Design

Creating User Experiences: Fundamental Design Principles by Billy Hollis part 7

One possible reason for resistance to a new design is that it's not advanced enough - MAYA - most advanced yet acceptable.

Performance vs preference

What an application needs to be most effective for the business is not identical to what the users like

The user is not always right.

Do your best to take their wishes into account as long as that doesn't compromise other success factors

Reasons the user might be wrong

Learning the existing system is a sunk cost for them

A hard-to-use system might be a barrier to entry for new users, which benefits existing users

They might focus too much on aesthetics, might prefer a pretty system over an effective one

They might have to change the way they do their jobs, and they may not like that

Many people just have a general discomfort with change

Flexibility / Usability tradeoff

Adding flexibility generally reduces usability

Finding the right balance has challenges

Every business application has a core functionality set required for the business to operate

A system that satisfies design principles but doesn't offer this core set is a bad design

Vocal users will usually push for more features

If you suggest a feature to a group of users, somebody will want it, and sometimes they get downright indignant if the feature isn't included in the developed application

Simply adding features to please various people risks bad design

Dramatically new designs make some old features unnecessary, and those features should be ruthlessly pruned

Every feature has cost

Consider both costs and benefits for any feature outside the core set

Development, testing, maintenance time, hidden costs from 80/20 rule, Hick's Law, etc.

get to "good enough"

No design is perfect, you'll never please everyone

Summary

Design principles are guidelines, not rules

Separate design principles often have tradeoffs, always be cognizant of costs and benefits

Trimming around the edges rarely yields successful design;  You must push into new territory to be successful in most cases

The goal is to get something good, but not something perfect

Creating User Experiences: Fundamental Design Principles by Billy Hollis part 6

Progressive disclosure - techniques are available now that you should be able to show the user the data they need to see when they need to see it (i.e. tooltips are no longer limited to text, we can make them look how we want them to look).

Highlighting - lots of techniques, non-traditional include offsetting, spotlighting

Mapping - should be so obvious what an element does that any other interpretation does not occur to the user

Physical location mapping to some kind of virtual location.  Leverage conceptions of the real world

Design affordances - scissors, the thumb location is smaller than the finger one.  In software, drag handles in the bottom right corner.

Entry points - get the user moving in the right direction at the beginning of an interaction.  i.e. click here to begin on an empty from, arrows pointing to where they should be interacting, etc.

Constraint - prevent the user from doing something that is inappropriate or impossible at that time.

One of the most frustrating flaws is denying the user an action they should be able to perform (i.e. not enabling things appropriately).  A good example is a slider, which sets a max and minimum, and could set increments.

Feedback

Warnings and errors

Progress

Changes in status

Position the element giving feedback close to the item it is giving feedback on

Confirmation - asking too much dilutes the value of it.  Reserve it for exceptional circumstances

Forgiveness (undo) - holding area for irreversible operations

---

Meta-Design

Taking context and circumstances into account

Balancing design factors against one another

Design principles are guidelines

This trash can design on the left is from Juno, AK, where there are bears nearby.  It would be bad design for New York city (as it would require one to use one hand to open it (putting down your briefcase in order to open it and throw away your coffee cup), as opposed to an open design that you just toss things into it, but is perfectly acceptable in Juno because no one wants to attract bears.

Good design vs bad design depends on context.

Don't be dogmatic in applying design principles - there is no one true way.

New conditions have made certain design principles more relevant - i.e. touch interfaces.

Gesture lexicon

Element size

"Gorilla arm"  - don't want the interface to be vertical if the user is going to be using them for very long

Form follows function

A hallmark of a design that matches the user needs is that it tends to have an elegant feel

This is an emergent property of good design, not an initial goal

If you start with elegance as your goal, it's easy to over-invest in cosmetics, and the elegance of "form follows function" is not about cosmetics

Application of Occam's Razor - choose the simplest design

Most Advanced Yet Acceptable

To make a difference with design, you need to push into new territory

Sometimes that means radically new and different designs, especially if the older designs were either bad to begin with or are now obsolete

The limiting factor is often what users can accept

If you get too advanced, users can become uncomfortable and wary

During periods of transition designs need to push into new territory, or shelf life may be too short.

If you don't get a certain level of change, inertia may become an issue due to familiarity with the old design.

Creating User Experiences: Fundamental Design Principles (Aesthetics) by Billy Hollis part 5

Naturalness  part 2

Contour Bias - people prefer flowing, curved structures instead of straight line and angle structures

Curved surfaces connote safety, angled or hard edges, danger

Animation - misused more often than not.  Used to draw attention to things, which is usually irritating.  Like gradients, animations should be unobtrusive and work in harmony with what the brain and visual system expects.

Fade things in and out instead of having them blink in or out.  Indicators should fade in and out as well (4/10ths of a second to fade is a good starting time)

Animations can help maintain context i.e. having something shrink and fade to the background instead of having it blink there.

  

Users prefer a 3D experience as opposed to a flat one - the real world is 3D.  Shapes, shadows, layering, reflections, perspective, texture gradients, atmospheric perspective.

Aesthetics and Usability

A beautiful design is considered more usable.  Users will give a "beautiful" app more chances than an "ugly" one.

Don't spend much time on typefaces for business apps, almost all modern default fonts are fine.

Keep number of sizes used to 3 or 4 (what about different font faces?)

Legibility is affected by size, contrast, and spacing

Allow users to change the font size and have your application adapt

Creating User Experiences: Fundamental Design Principles by Billy Hollis part 4

White space reduces cognitive load

White space is the preferred method for grouping

Preserve your white space

Semantic Zoom - RTS games have been doing this type of thing for a while

Fear of empty spaces - "Screen real estate is valuable" fallacy

Non-traditional navigation patterns - http://billyhollis.com/

Check out the Design Resources Corner

"The Design of Everyday Things" - Donald Norman

"Universal Principles of Design" - William Lidwell et.al.

"A Whole New Mind" - Daniel Pink

"Sketching User Experiences" - Bill Buxton

"Drawing on the Right Side of the Brain" - Betty Edwards

"Designing with the Mind in Mind" - Jeff Johnson

"About Face: The Essentials of Interaction Design" - Alan Cooper

http://visualstudiomagazine.com/blogs/vs-live-video/2013/12/billy-hollis-keynote.aspx

Design Resources

The Whole Brain Developer - BASTA keynote. 2011

Demonstration of StaffLynx (8 minutes)

Introduction to XAML for Developers. Part One (Video instruction from Billy)

Introduction to XAML for Developers. Part Two (Video instruction from Billy)

XAML Colors. Brushes. Images. and Opacity (Video instruction from Billy)

Bill Buxton's keynote at MIX 2010 (video)

UI Patterns site on Yahoo (oriented around HTML UI instead of XAML. but still a good resource)

Quince UI Patterns site (sponsored by Infragistics)

In nature there is almost no monochrome, a lot due to lighting effects.  Lighter part of gradient on top (light comes from overhead) - top down lighting bias.  Can use a dark on top for contrast.

Think of how creepy a face looks when telling ghost stories around a campfire when lit from below.

Gradients should not be noticed.

People may have a difficult time verbalizing why they like something based on the natural principles, usually because they like them due to unconscious reasons.

Kuler.adobe.com

Colorschemer.com/schemes

Because of our evolutionary history, people unconsciously prefer natural things in many contexts

lushness, open spaces, and gradient lighting

There are exceptions where other design principles override the preference for naturalness 

http://visualstudiomagazine.com/blogs/vs-live-video/2013/12/billy-hollis-keynote.aspx

Creating User Experiences: Fundamental Design Principles by Billy Hollis part 3

Gestalt: Common fate
Items that move together are grouped
The most common use in software dragging and dropping a set of items

Gestalt: Figure / ground
Your visual system unconsciously chooses what part of the field of vision to consider the foreground, or figure.
This part of the field of vision gets the attention and focus
The rest is considered the background, or ground, and unconsciously given lesser importance
The ground can also be used for grouping
Elements with a common ground are considered grouped

	Yes	No
			Ketchup
			Mustard
			Pickles
			Lettuce
			Tomato
			Onion

Gutenberg Diagram

The visual system sweeps from top left to bottom right for people who read left to right, top to bottom, for RTL readers the sweep is from top right to bottom left.

Notice where the most important information is contained on the screen in the application

Human desire for natural things creates another family of design principles - resulting from many generations living on the savannah/grasslands.

Biophilia
Savannah principle
Whitespace
Natural gradient preference
Top-down lighting bias
Horror vacui
Contour bias
Unobtrusive animation

The general theme is that imitating natural things in a user interface results in a subconscious preference by users and can lower stress

*is the preference for whitespace, or is this more influenced by the application of Hicks Law (more choices = bad).  How does a screen with only a few things on it, but close together, feel vs a screen with only a few things that are separated by white space.  Probably some of both, even a screen with white space on it but too many things feels "busy". Nmkl;

Creating User Experiences: Fundamental Design Principles by Billy Hollis cont'd

Notes from Billy Hollis' course

Human visual system is optimized to see structure and relationships, leading to the gestalt principles

Proximity

Similarity

Common fate

Continuity and Closure (filling gaps)

Figure / ground

Stages of human visual processing

Stage One: processing inside the retina
small area of high res and color - where the person is focusing

Tuning to detect edges. 

Peripheral vision is tuned to detect movement.

Stage Two: "Preattentive" processing

Information from retina assembled into shapes and groups

Stage Three: "Attentive" processing

Stores of experience used to interpret the output of state two

 

Gestalt principles come from stage two

predisposition to interpret edges, shapes, and groups in certain ways - unconscious

Conscious interpretation can override the perceptions from stage two, but it takes cognitive work  - users don't like doing it.

"Don't Make Me Think" by Steve Krug

Most users will see this as 2 mutually exclusive columns of options, i.e. they think they can only pick one option from column 1, and one option from column 2.  Proximity is causing this, so be careful with it.

Yes	No
		Ketchup
		Mustard
		Pickles
		Lettuce
		Tomato
		Onion

 

Objects that are similar override the proximity principle (to a degree), such that most people will see 4 rows of stars, not 5 columns:

 Color, Shape,  or Size can accomplish this overriding of proximity (size is least effective)

This can also be used for highlighting

 

Need to make sure the task the user is focused on is promoted by your software, or inattentional blindness may cause them to miss the thing you expect them to see.

Notes from "Creating User Experiences: Fundamental Design Principles by Billy Hollis

Here are my notes so far from watching Billy Hollis' course, I'll add some comments and take-away's when I get home.

Proliferation of devices
Touch computing
Ubiquitous connectivity
Cloud storage

For the history of software, it's been good
enough to make things possible. Now
success also depends on making things
easy.

Why not just stay in the ruts?
It's hard to get out - really hard
It requires investment of time and money
For some systems, it's not worth it
It gets us out of our comfort zone

The payoff can be huge
Higher productivity
Lower training
Fewer errors
More satisfied users

Applied imagination is creativity.
Creativity is working on solutions
to real-world problems.

Applied creativity is innovation.
Innovation is producing the
tangible real-world results that
apply a creative design or solution.

Our ecosystem has changed, new touch based devices like the Ipad, Kindle, Android tables, and touch based phones have changed the expectations of users.  The Kinect and vision/gesture based systems are going to change it even more.

http://bit.ly/StaffLynxDemo

Inattentional blindness
High resolution area of visual field is very small, about the size of the moon. 

How the human brain works, and what designers need to do for the results to work in harmony with the way people really see, think, and work.

Warning messages close to this source, blinking is annoying (maybe limit the number of blinks?)

Every time an option is added to a list it decreases the value of every other option in the list
Actively look for ways to expose functionally to the user that makes them the most productive

Fundamental Principles of Designing Things

Here are my take-away's so far:

1. Developers should be doing more than making things possible, we should be striving to make the user's job easier.
2. Users are no longer satisfied with the "grey battleship" design of business apps.  The prevalence of devices such as the IPad, IPhone, Android Tablets, Windows Surface and touch enabled phones has made them expect more responsive and user friendly designs
3. Learn from real-world designs,  both good and bad.  
1. Keep aware of archetypes that users are familiar with (buttons, signage, etc.).  Keep aware of recent developments, i.e. square button familiarity due to recent usage in applications.
2. Gestalt - principle of proximity
3. Fitts Law -  the time required to rapidly move to a target area is a function of the distance to the target and the size of the target.
4. Pareto Principle (80/20) rule
5. Hicks Law -  increasing the number of choices will increase the decision time logarithmically.
6. Consistency, Symmetry, Alignment.
4. There are a couple of canonical books to read:
1. Universal Principles of Design by William Lidwell, Kritina Holden, and Jill Butler
2. Out of Our Minds: Learning to be Creative by Ken Robinson
5. We need to "exercise"  our right brains (developers mostly exercise the "left" brain - the logical, mathematical part) to develop 
6. Users outnumber developers - it's worth a lot of effort to save the users even a little bit of time.

More to come as I finish the course.

Mastering posts

I''m going to try posting about mastering different areas in programming.  I'm going to start with one of my weakest areas, UI design.  I will tag these posts with mastering.  Hopefully I will help people other than just myself, but if it's just me that's ok too.  Putting your thoughts down on paper is always helpful.