Category Archives: Web Design

Google’s Makeover

This came from CNet News.  Starting today, May 5th, Google is changing its look.  I noticed the change right away, and I’m not exactly sure why they felt there’s need for change.  I do like the additional navigation and controls which are now located on the left side of the screen.  I’m not sold on the new logo because it comes across as flat and cartoonish in comparison to the traditional realistic logo lettering. It will probably grow on me though because cartoons are fun.

The authors of the CNet article are not correct in saying that the new logo eliminates the shadow behind the logo; the new design still incorporates a slight shadow, but it is very small and more spread out.  There are additional hues that accompany the famous primary colors.

Keep your eye out for the new changes!

Online NW Keynote Speaker: Brandon Schauer

Brandon Schauer, the Keynote speaker for Online NW 2010 (see his blog), talked about four key “hacks” that enable one to look at things from the user’s perspective.  These are my notes from his talk.  According tho Brandon, user experiences have four main values on the internet: utility, usability, profitability, strategy

As a society, we have begun to move away from how to do/make things better, and to now focus on how to decide what gets worked on (to focus on strategy).  You can’t make everything perfect; everyone has a different opinion and you can’t meet everyone’s expectations.

1. Get empathy into your organization. Define the experience that users will have.  Have lots of ideas, and make sure that those ideas are in the right places. Many would be innovators have spent a lot of time and energy and resources developing a killer application or product, but it was not quite in the right place or time.  They did not focus on what needed to be innovated or what was truly needed and wanted.  And return to the user’s context.  Often!

For example, Brandon used an old Scientific American article for how to use one of the first photos (the photo machine — aka cameras — came with miles of directions, were poorly labeled, and ultimately frustrated users; they were poor directions).  Along came someone who simplified the directions which helped sell the first Kodak camera.  The new motto was, “You press the button, we do the rest,”  He turned a long scientific process into three simple steps to help new photographers become less technical and more focused on the fun of the experience.

2. Expected value: Risk Real world launch or failure.

Realworld development costs vs. realworld failure.  In other words, stupid things that are produced that shouldn’t be.  There are four ways to develop realworld development costs (focus on): 1. Get empathy into organization.  Start with data, logic, interface, and experience (experience is the end product). How do you start with data?

  • Spend time with target user.  Learn about their behaviors and motivations, connect insights to your organizational objectives.  (recruit friend Craigs List do screen sharing. “Tell me the last time you were doing that thing I want you to do.  Recent experience, step by step to pick up how people behave for critical insights.)
  • Learn about behaviors and motivations (unmet needs, critical insights, user requirements)
  • Empathize (exercise with objectives)

3. Define the user experience. What makes a good experience? Is it fun, the brand name, the mission of the organization.  For example, Brand: styleguides (How do you look and feel, how do you talk as an organization?); Experience principles (e.g. tivo: it is reliable, puts me in control, simple, more boxes on a screen, enjoyable because you live with it); is it memorable, inspirational, differentiating (fit need that isn’t met & different from competitors.  What makes your product different)?

***The peak-end rule: (People tend to remember experiences that are the highest and lowest experiences and how it ended).  Try to not have negative end (e.g. customer that leave on a bad note), but keep in mind that it isn’t practical to be perfect all the time — you’ll end up spreading yourself too thin. It pays to have one really, really good experience mixed in with mediocre experiences and to have a really strong end.  The high points and good end note tend to wash over the mediocre experiences, and the high points/end are what they remember.

4. Have lots of ideas in the right places. The myths of innovation is a book with more info, if you want to look it up.  People have a habit of having just one idea (one point in space) and running with it.  But there are lots of points to consider, and we NEED to think past the first idea!  If people took the time to think of 10 ideas, they would find that on average the 3-5 ideas tend to be the best.  This is partially because we don’t think things through very much or bother to look outside of the box we first envision.  Brandon gave us a “Facebook for the Intranet” exercise (6 ideas in five minutes).  We focused on how to find experience.  He demonstrated how the three-fourth ideas tend to be the most interesting and most promising ideas on average within a thought cycle.  Ultimately, we look at first at what we know and avoid what we don’t know.  If you can turn this cycle on its head and go after middle (don’t be a doughnut), you’ll do much better.  In short, go right to the problem you don’t know how to solve, such as selling a car online which had never been done before and is done all the time now.

5. Return to the user’s context.  Often! How do you know if your product is going to succeed?  Do a dry run first with low-cost and little to lose. You should do this when you lose the fresh perspective of a user–if you can get a fresh perspective from a user, test it.  Everett Rogers was given as an example for the Diffusion of Innovations Theory: relative advantages, compatibility, complexity, useability. Bring everything together.

As a review:

  1. Get empathy into your organization.
  2. Define the experience users will have.
  3. Have lots of ideas. In the right places.
  4. Return to the user’s context.  Often!

Enhanced Digital Images and Videos

Those who do graphic design or work with images & video regularly will be extremely interested in new software to enhance images. MotionDSP Inc. will release a much cheaper version of the Ikena (about $7,700), called vReveal (about $50). The professional software of Ikena is mainly used by forensic & police departments to sharpen images for law enforcement purposes, such as make blurred license plates readable in blurry photos.

vReveal will not do as much as the full version of Ikena, but it will be able to stabilize shaky, remove graininess & pixelation, improve low resolution, brighten dark images & video, sharpen blurred videos, and reduce noise from home video. According to the New York Times, MotionDSP has technology, now being tested, to clean up live video as it streams to the viewer.

Visit the vReveal website
Read more from the NY Times

Web Design Principles

Library Journal published an article entitled, “Web Design Matters: Ten Essentials for Any Library Site.” Here are the basic suggestions which are common web page design principles:

1. Promote – Use the home page to promote collections & events. Place the info near the top of the page where the path of the eye naturally follows, and refresh the content regularly.
2. Segmentation – Present content differently for major patron groups.
3. Visual Cues – Use icons to break up text, especially text-heavy pages.
4. Inspiring Photos – Use images to reduce text (words).
5. Search Boxes – Use search boxes to empower the user & add dynamics to pages.
6. Mobile-Friendly Pages – Design with mobile devices in mind too.
7. Feedback – Provide a suggestion box to solicit ideas & concerns, and way to communicate with patrons.
8. Redundancy – Instead of funneling patrons through a “proper” path, include many routes for patrons to access the same info & services.
9. Analytics – Analyze the problems of a web page with analytical tools (e.g. Google Analytics).
10. An Easy Way To Ask for Help – Include many ways to ask of help including instant messaging.

Click here to read more and view examples of each principle.

Best Web Design Practices for Library Giving Pages

BEST AND UNIQUE

Note: These are my own opinions and are not associated in any way to my institution.

Below are some of the best web pages that caught my eye for library “Gifts & Giving” while I was checking out various library web sites during the summer of 2009. Many libraries only have donations mentioned within their policies, link to the general college donations page, or have a link with their Friends of the Library organization. Here are other interesting library pages I found.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

OSU

http://osulibrary.oregonstate.edu/giving/

OSU: This is the best site: clean, intuitive, & inspiring.

OSU: Clean, intuitive, & inspiring.

These pages are located under “About Library,” two links from home page.

This is probably my favorite web site I ran across for library giving.  It has two outstanding & well-marketed videos: a longer video about what the library is doing and heading (future goals), its value to students & faculty (from various perspectives), & unique collections & services; and a shorter video from a student’s perspective on the value of the OSU Library & how donations help the library & students.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

U of O

http://libweb.uoregon.edu/giving/index.html

UO: This is the best site: clean, intuitive, & inspiring.

U of O: Purpose & priorities.

I eventually located these pages by clicking on “Index” to “Giving.” This process was four links into site, which is surprising that it was buried so deep within the site; it is not easily found.

U of O currently has a very basic layout, which is clean cut and intuitive to use. It does not sport any graphics or videos, but simply lays out the different ways to donate and their wish list and priorities. It also includes basic forms for specific funds.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

U. Washington

http://www.lib.washington.edu/support/

U. Wash: E-newsletter & easy navigation.

U. Wash: E-newsletter & navigation.

These pages are located under the “Support the Library” link, which is listed directly on home page.

The U. of Washington is one of the few sites that has a link directly from the library home page. It includes many pages of “giving” and the history of each fund.  I found myself getting a little lost because there were so many layers (sub pages) and different ways of giving; the navigation was a little problematic (again, my opinion).

However, the donation process itself is an easy 1-2-3 online gift form.  It also sports a nice e-newsletter that outlines library activities, and links to upcoming library events.  The left navigation bar kind of gets lost in the purple background; it could probably use a different background, such as a more neutral purple or something with less contrast, but still makes it “pop” from the current location as well as tie it into the rest of the page. I also noticed that it incorporates an image of a person (personalizes the page).  This is a very important element which many libraries and web sites consistently forget to include throughout their web sites!

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

PSU

http://www.pdx.edu/giving/big-plans-library

Clearly shows different ways to support financially.

Clearly shows different ways to support financially.

These pages are located under the “Giving to the Library” link on home page.

It link to a page which is clearly labeled. It states their future plans/goals and the different ways to lend financial support.  The top navigation blends a little too well and should be made a little more obvious.  This is probably due to choice of color, shape, text font size and style. There is a button after each project for online giving, and the online giving form is another easy 1-2-3 outlined process. Overall, these pages are pretty nice.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Albion

http://www.albion.edu/library/Friends/fundraising.asp

Contains a lot of useful info, but no directly link to 'Give   Now.'

Useful info

These pages are located under the “Gifts & Donations” on home page.

This site provides a lot of info about how people can contribute to the library, mostly through the friends of the library, but not exclusively.   It is the only institution that lists specific small resources such as encyclopedia sets or databases in which the donations would support. It includes support for collections, special gifts given to the collections, endowments, special projects and library spaces. It also includes a list of past Friends of the Library members, but the A-Z navigation membership list does not allow for browsing–one needs to click on each letter to view the donors under the respective letters. The list is pretty neat because it include historical members too.  This site has a lot of very useful and informative content!

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Sarah Lawrence
http://www.slc.edu/library/friends.htm

Shows what past contributions have funded.

Shows past contributions.

These pages are located under the “Friends of the Library” link on home page.  It is a little on the text-heavy side.

This site is more basic, but it includes accomplishments of Friends of Library funds from current and previous years as well as what privileges that Friends of the Library membership provides.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Smith

http://www.smith.edu/libraries/info/giving/

Good content & well arranged. Includes images of students, the   many ways of giving & reasons to give. E-form & postal   directions for giving.

Smith: Good content & well arranged.

These pages are located under the “Giving to the Library” link which is on home page.

The content for donations and gifts is located on the same page.  There is not much content posted on these pages, so it is actually fairly easy fit everything onto one page.  It includes images of studying students, and the many different ways of giving and reasons to give. For example, they have a goal of creating a new space with in the building for a reading room.   It also has an e-form & postal instructions for giving and donations. Overall, this has good content, and is well arranged.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Other interesting library pages

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Interesting Web Pages

OTHER INTERESTING WEB RESOURCES

Note: These are my own opinions and are not associated in any way to my institution.

Below are some interesting web pages that caught my eye while I was checking out various library donation web sites during the summer of 2009. Here is a link to some of the best library donation pages I found (in my opinion).

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Amherst College https://www.amherst.edu/library/about/support/friends/oral_history

Amherst: Oral History Project.

Amherst: Oral History Project.

Amherst has an interesting oral history project worth looking through. They have a Facebook presence on the library home page too.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Augustana College Blog
http://tredway.wordpress.com/category/naked-came-the-librarian/

Augustana's Blog, which includes short stories.

Augustana's Blog, which includes short stories.

Augustana supports an “external” library blog with short stories written and compiled by various library staff. It is freely available to read online.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Bowdoin College http://library.bowdoin.edu/index.indexes.shtml

Bowdoin: includes what students are reading & unique way of handling databases.

Bowdoin: includes what students are reading & unique way of handling databases.

The databases are listed by subject instead of searching through a federated search box. It is connected to the general search box on the home page. I also like the Bowdoin Reads on the home page. This gets the students involved and includes social aspect into library web page (photo of a person). http://library.bowdoin.edu/index.shtml .

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Bucknell http://www.bucknell.edu/ISR.xml

Bucknell: Includes a ticker for current info & changing graphics with info bits.

Bucknell: Includes a ticker for current info & changing graphics with info bits.

This page has a scrolling ticker line on the library home page for library news, plus constantly changing graphics with bits of info about the university. Very nice way to roll info through to students and faculty!

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

DePauw University http://www.depauw.edu/library/

DePauw: Clean home page.

DePauw: Clean home page.

I like the clean home page, and it is well organized throughout the entire site. I also like the about us web page.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<!–
– Rollins http://tars.rollins.edu/olin/

Short video of library.

Rollins: Short video of library.

Basic info about giving. http://tars.rollins.edu/olin/about/index.html.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

–>

Skidmore http://www.skidmore.edu/library

Skidmore: Facebook presence on home page.

Skidmore: Facebook presence on home page.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Follow

Get every new post delivered to your Inbox.