Practical UX tips

Advantages of  UX

• Great user experience
• Meets the customer needs
• Easy to use
• Enjoyable to use
• Simple

UX!=UI (not the same as the user interface or UI)UX!=Usability
UI is part of UX

Practical tips and tricks for UX

• Alignment

• The placement of elements such that edges line up along common rows or columns, or bodies along a common center (Usually involvment in left, right alignment if the elements)

        

• Proximity

• Elements that are closed together are perceived to be more related than elements that are father apart 

                  Tips:

• Group no of related items together 
• Limit the no of objects

                

• Repetition/Consistency

• Usability of a system is improved when similar pats are expressed in similar ways

                    

                Tips:

• unify design
• add visual interest(Make font bold, using the same color for headings, sub headings, similar backgrounds on all sites,show relationship,signify special elements)

• Contrast

• Users will notice and remember things that would stand out  

                  Tips:

• User will notice and remember
• Adds visual interest and hierarchy,               

• Color

• Used in design to attract attention,group elements, indicate meaning and enhance aesthetics

                

                      Tips:

• Understand color wheel 
• Primary colors (Red,Yellow,Blue) note: We cannot mixed other colors to create them 

• Secondary colors (Mix the primary colors we get secondary colors)

• Tertiary colors (Continue mixing)
• Complementary colors(Opposite on the color wheel)
• Triads (3 colors that are equidistant from each other on the color wheel)
• Cool colors ( Have blue in them, Do not pop on the page)
• Warm colors( Have red or yellow in them. Do pop on the page)
• Hues color (Base line color)
• Shade (Created by adding black to a color)
• Tint (Created by adding white to a color)

         

• Its complex and powerful
• We need to combine color puposefully

Note: We can use one of the color as base color and other as accent

• Typography

• Is what the language looks like

                  Tips:

• Serifs and sans serifs are the best choices
• use website fonts for the web

• Visibility

• The usability of a system is greatly enhanced if elements are clearly visible to the user

              Tips:

• Follow guidelines for "Fold" (The main part of the web page which is visible without scrolling)

                Content which should be on the "Fold"

1. Branding
2. Main navigation
3. Contact information
4. Search Box
5. Shopping carts
6. Sign up/login                             

• scrolling 

• Banner blindness ( Avoid banners which looks like a ad)

• Understand-ability

• Shared reference brings understanding
• Language,images/icons and sounds helps understanding
• Try to think as a user

• Simplicity

• Elegance is not the abundance of simplicity .It is the absence of complexity

             Tips:

• Effective use of white space (The absence of text and graphics)
• Do not provide many choices (Do not shown content unless the user has logged)
• Use of sub menu, tabs

• Keeping users informed

• Users should always know what is going on with the system and their position in it

            Tips:

• Provide messages
• Progress bars and steps
• Navigation and breadcrumbs
• Confirmation and error messages