EXPAND WEB CONTENTS IN INTERACTIVE WAY

There are some webs that show us how to expand the content interactively in vertical and horizontal that we do not need to open a new page. Take a look and if you are interested in those kinds of websites, do not hesitate write down your comments, ideas ^^!

I. Expand in vertical:

1. Twoto:

Use the circle icon (+)  and explained keyword  to help users read content more . Once they click onto the icon. It will move the content down, expand the vertical. When closing the content, the page will scroll up.

http://www.twoto.com/

2. Ideaexhibit: 

Use “+” and “-” to expand and close the content. The page also scrolls up or scrolls down when expanding  or closing the content.

(http://ideaexhibit.com/)

3. Typetoken:

Use icon (>) to open the content, once the content is opened.  Some pictures in the  current page will move left or right, then the content that we want to open will be  in the 3/4 of page (could be on the left or right). 1/4 page  includes  big thumbnails that users can choose them if they want to.

http://www.typetoken.net/publication/process-4-5/

Advantage:

  • The expand area is 3/4 horizontal page so that it can help user sees others items.
  • The expand area can be on the right or left that makes users more interested when interacting with this design (however it have a little confusion => need to be make experiment to check user experience)
  • When clicking on the “close” in the expand area. The thumbnails will move back  their positions help users know the rules of moving thumbnails.
  • Fixed navigation menus helps users well-navigate pages.
  • Main and sub menus are divided separately and clearly.

II. Expand the content into horizontal

1. Pentagram:

Click on to the thumbnail when we want to see more content.  This page expands content into horizontal.

http://www.pentagram.com/work/#/all/all/newest/2530/

2. Craigandkarl

By clicking on the thumbnail, the content will be opened and fulled all screen. Once  we click on the “x” button, the slide will scroll onto the left and and the homepage will be seen again.

http://www.craigandkarl.com/#!

Advantage:

  • Be consistent : with this design, it looks like we use each layer for each page, once the content layer is close, this layer will be moved on to the right. The background layer is still in same page without loading.
  • In the content layer, it has some social icons that can be share in those  social communities if users would like to share.
  • Good-layer navigation.
  • Use fixed-navigation menu
  • There is icon navigation bar and pagination in the bottom of  the site to navigate the content.
  • Because of heavy content, so that we should use pagination to navigate easily.
(To be continued)
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: