Look into what's the latest website trends are. What are websites currently doing?

1. user experience agency

2. • Following presentation will look into various trends that
have or will be coming into practise for the remainder of
2012.
• So, what’s trending?
Introduction

3. Design
Looking at what is trending with page design

4. Example: BBC website
• A lot of sites going with a top navigation approach.
• Adding a ‘more’ option, which lists less popular options.
• Advantage:
1. Top navigation looks clean and simple.
2. Able to group options together.
• Disadvantage:
1. What do you priorities? If you are trying to cater for all users, you might have a problem trying to priorities.
2. Need an effective way to present the “more” options.
Light Weight Navigation Approach

5. • In general, moving items are being
used more regularly. Share items on
news sites such as Mashable.
• Side or Top Navigation, which move
down as you scroll down the page.
• Advantage
1. Allows you to create longer pages with lots
of content.
2. Navigation is easily accessible.
• Disadvantage
1. Takes up on screen real estate.
2. Screen size. On small screens the
navigation might not fit therefore part of it
might be cut off.
Moving Items

6. • Interactive mega-navs that allow
users to engage with them.
• Gives a clear overview, but
highlighting particular sections.
• Advantage
Example: ESPN 1. Highlight content
2. Interactive content added to mega-nav
panels
3. Instant access to the content.
• Disadvantage
1. Sub-navigation, how do users access
content displayed.
Example: Wimbledon
Mega-Navs

7. • Using imagery as a visual & navigation
aids.
• The images used are representative of
the information been presented.
• Product (RED) website uses images
really well.
• Advantages Example: berndkammerer
1. Making your website more visual.
2. Creative approach, which adds more life to
the website.
• Disadvantages
1. Too many visual content might make the
site too busy and hard to go around
intuitively.
Visuals & Imagery

8. • Larger fonts are being used
increasingly.
• A move away from cramping
everything onto the screen.
• Advantages:
1. “White” space. The page looks more
cleaner.
2. Place focus on the important content.
• Disadvantages:
1. Not ideal for smaller screens such as
mobile phones.
Example: Les Evades
2. Takes up too much onscreen real-estate.
Large Text

9. • Preview allows users to get insight about a section
before going into it for more information.
• TED uses hover states. Users can hover over the image
and get a snapshot.
• Google Search presents a preview on click.
• Advantages
1. Saves having users to navigate to another
page.
2. Preview information presented when needed.
Therefore you are not over crowding your
page.
• Disadvantages
1. Hover states such as one used on TED can’t
be used on touch screens.
2. Adding another step in the journey. This
Example: TED & might not be the best approach in some
Google contexts.
Clever Preview Approaches

10. Example: YouTube
• Rather than having users navigate deep into a site to the main content, the content is hidden and only visible when
the user needs it.
• Advantages
1. Allowing users to access content on the page.
2. Makes the page more interactive.
• Disadvantages
1. When everything is on one page, it is harder to present the content logically.
2. Can be overwhelming to the user if there are lots of functionality on one page.
3. Have to make the content areas obvious to the users.
Expanding Content Areas

11. Architect
Looking at what is trending with page architecture

12. • The increase in responsive web means
there is more emphasis on grids.
• There are a range of grids such as Fluid,
Column drop, layout shifter, spaces, & off
canvas as identified by Lukew
• Advantages
1. It gives you a clear structural view of how the
website changes over various screen sizes.
2. Chance to organise the content & set priority.
• Disadvantages
1. Restricts your creativity. You have to think in
terms of the grids set out.
2. Transitions from screen size to screen size is
restricted.
Grid Layouts

13. • With the Responsive Web becoming
popular, it means that architects and
designers will have to focus on
mobile sites.
• Mobile site forms a good foundation
from which you create other sites
from.
• Advantages
1. Identify high priority first.
2. It is easier to add options to a site.
Therefore starting in the
simplest/critical view first then working
forward is the best approach.
Mobile First

14. • Most of the websites you will be
seeing the months to come will likely
incorporate things discussed in this
presentation.
• You should try and adapt these
trends, but this doesn’t necessarily
mean you should stick to them.
• It’s always best to think out of the box
and push the boundries!
Last Word

15. That’s All Folks
Shean Malik
UX Architect
E: shean@zabisco.com