Interface Design | Hyperlocal

Link: http://hyperlocal.nfb.ca/#/hyperlocal/bull/

 

Technology Used: Javascript and Jquery

This site is also a collection of people’s stories. Some are audio pieces with images and some are text stories with graphics to decorate it.

 

The Interface:

The main feature here is the background changes when you hover over each story. The background represents what the story is about. I think this idea would work well with my project too. I don’t like the layout that the it’s 1 – 6 are they are in a line just doesn’t seem personal enough. There is also audio when you hover over them there’s  clicky noise, kind of annoying and sounds too techy.  I do like the background idea and that would work well for an interface with a more open layout with boxes etc. So when you hover over the box a screenshot of the media inside becomes the background and the opacity is down a bit too so you can still see your options.

Screen Shot 2015-02-09 at 00.32.43 Screen Shot 2015-02-09 at 00.32.35 Screen Shot 2015-02-09 at 00.32.30

Screen Shot 2015-02-09 at 00.33.30

Screen Shot 2015-02-09 at 00.33.46 Screen Shot 2015-02-09 at 00.33.57

 

^^ This is a snippet of one of the stories. I really didn’t like it it. The navigation was click click click and it took a while to load. The animated cockroaches running along the screen made it bearable.



Screen Shot 2015-02-09 at 00.39.12 Screen Shot 2015-02-09 at 00.39.03 Screen Shot 2015-02-09 at 00.38.38 Screen Shot 2015-02-09 at 00.38.31

 

ˆAnother snippet of one of the stories. I found this one interesting because you hover over each images and it moves as you move the mouse. It is a simple idea and is very effective. Could be useful if one of my stories had a lot of photography this would be a good way to display it.

 

The one thing I am taking away from this interface is the background changing when you hover over a story and the photographic display.

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