Author Archives: teddynykiel

What matters 2 us: jQuery, JavaScript

When you first get to this website, “What Matters 2 Us,” you see a navigation bar on the left side and then a grid of slightly opaque photos. As soon as you hover over a photo, the navigation bar disappears and the whole screen shifts right to bring just the photos into view. When you hover over a photo a caption pops up which is practical, but I think the bouncing animation is a bit distracting. what mattersWhen you click on a photo, a smaller window pops up with an individual video and accompanying text. From there you can click back to the main photo grid to choose a new story, or you can click the arrows in the upper left corner to scroll to the next story. I think this is a great use of variety in the navigation because it gives users multiple ways to access the stories. last bulletThis site uses jQuery and JavaScript. Here is an example of some of the coding it uses:

JavaScript:java jQuery:jquery

 

 

Advertisements

Living Galapagos: Video background

The interactive site, Living Galapagos by the University of North Carolina at Chapel Hill uses  CSS to create a video background to add a subtle but interesting touch.

galapagosAlthough you can’t see it in this screenshot, the background is actually a moving image. I’m not sure if it’s a video or .GIF or how it works, but the waves, leaves and lizards all move. I think this is a fun touch that makes the website come to life. Here is the HTML and CSS:html

css

Both the HTML and CSS look relatively simple. You just add a “div class=video-background.”

The box that holds the first video is transparent, but when you click the play button the video loads and is viewed at full opacity. If you click “Stories” on the navigation bar, a similarly transparent menu pops up where you can choose other videos to watch.  If you click “Learn,” you see an interesting mix of infographics and social media and most interestingly, two games that are designed to help users learn about the Galapagos.

I love how this site uses good design and many different kinds of “junits” – there is text, video, photos, infographics, tweets, Instagrams, and more.

Harvard Business School Case Study

I chose to review the New York Times’ “Harvard Business School Case Study: Gender Equality.” The format of the piece is similar to that of “Snowfall” with fewer bells and whistles. I liked this piece more than “Snowfall” because I think the subject is more relevant and it interests me more.hbsThe user experience is simple: you simply scroll down the page and interact with the various forms of multimedia that you are presented with. There are videos, engaging infographics, blocks of text and photos. However, there is no navigation bar on the top, side or bottom of the story. Instead, users have to scroll all the way through the piece in chronological order. Users don’t have the option to choose what segment of the story they want to skip to, and I think this is the piece’s main downfall.

The intended audience for this piece is students, faculty and administrators at HBS and business leaders at other schools or companies. There is a section of story which asks for responses from these different groups specifically. I think this informed the NYT editors’ decision to do a case study, because they wanted their audience (other business leaders), to be able to learn from what HBS did.readers perspectivesWhen you click to see the responses in these different categories, you have the option to filter the comments in different ways. For example, you can view “female,” “male,” or “recent grads,” among other categories. I think this is a great aspect of the user experience because it allows the user to choose what perspective they want to read about. However, there is a usability problem with the response section, because it is difficult to navigate back to the main story after reading the responses.

The case study occurred throughout two years, all of the photos and videos in the story were from graduation day. Since it was an ongoing story, it would have been nice to have photos and videos from different benchmarks during case study – not just at the end. Still, I think that the video interviews were the most compelling aspect of this story.

CSS element: background image

thankfulThankful is a wedding registry website that allows couples to personalize their own wedding registries. I’m not currently in a place in my life where I need to make a wedding registry, but I love its simple design. The large image draws users into the website and the thin, sans-serif font keeps it feeling simple.

This effect was achieved simply through adding a background image. Here is how to do it:

HTML:

<header role=”banner”>

<div class=”container” role=”navigation”>

<a href=”#” class=”nav-toggle”>

<i class=”ss-icon ss-standard”> </a>
<a class=”brand selected” href=”/”>
<img alt=”Thankful Logo” src=”//d3krjgdh5n3zsi.cloudfront.net/assets/logo-white-2x-2c7b0e88f4b861599dffed4bf30dc154.png”> Thankful </a>
<ul class=”nav-links”>
<li><a href=”/find-a-registry”>find a registry</a></li>
<li><a href=”/sign-up” class=”sign-up”>sign up</a></li>
<li><a href=”/accounts/sign-in” class=”sign-in”>sign in</a></li> </ul> </div

</header>

CSS:

element.style {

background-image:url(https://d2rdrr51ez8te0.cloudfront.net/hero-posters/fields.jpg);

}

Usability and User Experience: Reuters

Reuters home

  • Usability: A-

  • User experience: A+

I’d give the Reuters website an A- in usability. You can get quick information just from looking at the header such as stock tickers and breaking news alerts. It is easy to distinguish click-able links because they are all in blue. The page is clearly broken up into defined sections: navigation on top, stories in the main section and Opinions and ReutersTV in the sidebar.

A flaw in the usability are the sub-headings in the navigation bar – some of them are confusing. For example, under “Business” —>”Summits.” I don’t know if I should click on it or not because I don’t necessarily know what a summit is.

reuters nav

I’d give the site an A+ in use experience because the design is pleasing to the eye. The typography and color scheme are accurately match the Reuters sleek and authoritative brand. Additionally, color choices and font sizes help create a clear visual hierarchy. For example, the headlines are in blue in the largest font, the first few sentences of the article are in a smaller-sized font and the authors’ names and time stamps are in the minuscule-sized font because those details are not immediately important.

Days With My Father

days w my fatherDays With My Father is a personal photo essay by Phillip Toledano describing his relationship with his 98-year-old father, who lacks short-term memory. The stories and photos began in a blog as Toledo reflected on his father’s aging. Now, in addition to the online photo essay, you can purchase it in hardcover.

The style of the website is simple: a white background, elegant sans-serif black font and compelling photographs. It’s relatively easy to use – if you hover near the bottom of the page and click, the next photograph slides into view. If you hover and click on the left, tiles of each photograph in the gallery appear and you can navigate to any one by clicking.

dwmf

The story itself is bittersweet. The author’s father is a former movie star, artist, storyteller. The situation is heartbreaking – the father can’t remember that his own wife is dead – he thinks she is in Paris visiting her brother. He spends hours a day in the bathroom because he forgets that he was just there.

But to keep it somewhat light, Toledano sprinkles the essay with funny anecdotes: his father’s morbid jokes, habit of eating nothing but eggs and saying ‘Look at my titties!’ when the author places two cookies on his father’s chest.fatherPhotos in the essay include many portraits of the author’s father but also stunning detail shots of his father’s hand and written lists and notes saying things like,

“I want to think seriously about what I can accomplish with what is left of my life.”

The photo sums up Toledo’s project: raw, emotional, uplifting.