Http://www.babycenter.com/ is a great go to website, for tips and information for new and expectant parents. This website has valuable information for any parent of children varying in age, from in utero, to approximately age ten. Some of this information includes product recalls, nutritional information, advice and support, pregnancy facts week by week and many other useful tools.
A great feature of the website is the email newsletters. Once the user has signed up for weekly emails, the website takes their information and generates an email based on the child/fetus’s age. In the emails, users can find details on parenting tips for various stages and age ranges for infants. These tips includes information like, when to stop feeding certain foods and for the pregnant mothers it sends weekly updates of the fetus’s growth patterns.
This website is unsuccessful at achieving suitable, eye catching arrangement. At first glance this website looks extremely cluttered. There is a lot of information coming at the reader in all different forms of content. There are videos on the right side of the screen and two tool bars at the top of the screen which appears to be dynamic. This can be overwhelming, especially for a new mother, who is seeking out advice and tips on caring for a newborn. Every link on the page seems to be clustered at the top and as you scroll down, there appears to be white space nearing the “more tools” and “contact us” section.
When looking at this website you can tell that the designer is emphasizing the tools that help parents in calculating various things, the support blogs and the video of the week. These items have a fairly large heading in comparison to the font in the tool bars and they are grey in contrast to the white background. The video of the week is fairly large and is eye catching because the definition is different from the pictures on the rest of the screen.
This website isn’t very clear. There is a lot of clutter on the screen and it is, seemingly hard to navigate. The designer attempts to create on screen clarity by, putting boxes around the content to frame it. This just groups the information in a non-definitive order. If the website had listed the content in alphabetical order it would have improved the clarity.
The website designer was very concise when it comes to: the grey scale in the headings on the page, the boxes around the featured text, bold in the font in the tools section and the green blue and white color scheme. The issue is that, the elaborate design in this website, slows down the usability and restricts users who would want to move quickly through the information.
The tone of this website is visually frenetic, there is a lot going on, on the page at once. The designer seems to be more interested in emphasizing the tools on the page, than the information. The underlying tone is professional. The authors of this website want to deliver the most professional, up-to-date medical information, available and you can see this in their wording.
The “babycenter” website has the look and feel of a magazine. They are targeting women who predominantly read magazines by, adding tools and quizzes to give the website a trusting vibe. Women who grew up reading magazines as their primary source of information, will be drawn to this website just by its design layout. They will in turn, trust the content of the website as they have trusted the content of so many magazines over the years, therefore building ethos.
The following table explains how the http://www.babycenter.com designers incorporate the Gestalt Principles in their design.
|Principle||How babycenter.com Incorporates the principle|
|Figure-Ground Contrast||This principle is predominantly shown in the framing of the content on the website. The frame makes the content stick out from the background showing importance. The darker tone enhances the white field in the background|
|Degrading Figure-Ground with Visual Noise||The visual noise in this website occurs towards the bottom of the page, where you see lists and advertisements. The web designers purposely put white space in-between the content of the page and the visual noise to enhance the contents in the framed boxes.|
|Grouping||The grey boxes around the content, fences off one group from another on the page. Although there is a list of tools at the bottom of the page, the most significant titles are grouped and sectioned off by grey frames. The closure of the text creates cohesion.|
|Patterns: Creating Groups Across the Communication||The layout of this website is a large pattern. The tools and advice topics are bolded in an aquamarine color. The important headings are portrayed in dark grey color. The advertisements are colored in green. Any type of “go”, “join now”, “go, calculate” or search buttons, is in a green color.|
Visual Language Matrix
Below is a model of the visual language matrix which incorporates the four levels of design and the three coding modes. This matrix is filled out in accordance to the applicable information visible on http://www.babycenter.com.
|Intra||· Plain Type Style
· 12 point font
|· Normal spacing between characters||· Punctuation marks|
|Inter||· Hyperlinks||· Two clearly visible margins on the left and right side of the page
|· Text boxes surrounding important text
· Aquamarine colored hyperlinks
|Extra||· Captions for Visuals||· In the center of the page the picture size for the three links are the same size||· Pictures are detailed
· Pictures are in color
· Use of color for data displays
|Supra||· Navigational Bars
· Section Headings
· Initial letters signaling the start of an article and major text segments
|· Page is a scrollable length
· Portrait landscape
· Placement of the data and pictures are visually appealing
|· Use of color scheme in text
· Grey Scales around articles, pictures and videos