Tee

When we started this project I, like most people had no idea what user experience was. I read many user experience centered blogs and websites to try understand the term properly. The website that defined it clearly to me was http://uxdesign.com/. the PDF attached is a summary of what I read from the site.

User Experience defined

Take note of page 2, I think its really important that we start applying some of the things shown in the diagram to our project. The earlier we start the better the results later on in the year.

__________________________________________________________________________________________________________________________________________

Started looking at apps for other cultural institutions around the world. I looked at apps for the Lincoln Center, Houston Zoo, Philadelphia Zoo and Museum of London. The PDF attached has a little information about the app, key features and images of the app. The similarities I noticed with the apps were:

– Animal profiles with photos

– Interactive maps ( GPS enabled)

– Genaral Info (Frequent updates)

– Connects to atleast 1 Social networking site.

Analysis of other cultural institutions’ apps

San looked at other apps for MOMA and the National mUSEUM OF Western Art, and we compared them, looking at how it works, the bad and the good features, and looked at what we can take from each app that could make our app work better. Below are the notes we took down.

Zoo Analysis

_____________________________________________________________________________________________________________________________________________________________________________

History of the three main Cultural Institutions.

A few weeks ago I visited the Auckland City Library to try get some Historical information on the Auckland Museum, The Auckland Zoo and MOTAT. There were quite a few books on the top floor in the research area, but unfortunately you are not allowed to take the books out, so I had to make do with photocopying and taking photos. The books I found the most resourceful were the Auckland Zoo and MOTAT ones. They had quite an extensive collection of historical data on those two institutions, which was both very educating and interesting. I had a little trouble finding any historical documents on MOTAT, both at the library and on the net. I couldn’t locate any sort of timeline for the place, which is kind of weird seeing the place is filled with historical artifacts. Below are links to 3 PDFs I made that give the history of the institutions in a nutshell. Some of the information is very interesting and could well be incorporated into our app in some way.

History of MOTAT

Auckland Museum History

History of Auckland Zoo

___________________________________________________________________________________________________________________________________________

Card Sorting (First Trial)

Currently trying to build a portfolio website for myself, for my other class, so I decided to try card sorting for my nav bar. So far I have tested it on two people (closed sort) and got 2 different results. I plan to test more people and maybe try an open sort and see how it goes. This is just a trial so that when we get to the point when we have to do a card sorting exercise for our app, we will have some knowledge on how to do it properly. Below is a video and  some photos of the trials I took.

Card sorting trial #1

Card sorting trial #1

Card sorting trial #1

Card Sorting trial #2

D.T Closed sort trial #2

D.T Closed sort trial #2

_____________________________________________________________________________________________

Research towards the research report: The Advantages of Mobile Apps.

information from: http://blog.infomedia.com/business-strategies/the-advantages-of-mobile-apps/

More and more of our interaction online occurs on mobile devices.  Over five billion mobile subscribers – about 77% of the world’s population – are online (Source: The International Telecommunication Union). This new type of simple access for consumers is catching on with a staggering amount of smartphone owners purchasing goods and services from their phone – 41% to be exact, as found in a survey by Chadwick Martin Bailey, 2011.So how do you capitalize on this new mobile technology? The answer is relatively simple: set up a mobile application and/or set up your website to be natively friendly to mobile browsing.Mobile Apps are internet applications designed to run on smartphones and other mobile devices. According to webopedia.com, mobile applications help users by connecting them to Internet services more commonly accessed on desktop or notebook computers. While opportunities abound, we have identified three advantages of using mobile apps for your business: speed, volume of information, and advertising.Let’s face it, we live in a not-so-patient society. We know what we want and we want it now. Most of us can’t count the times we have sat waiting for our computers to take over one minute to boot up and have found our patience tested. Mobile Apps take the “wait” out of mobile. Since most, if not all, of the information is stored within the application, there’s no need to wait on loading information over a slow 3G connection. Plus, what little information needs to be updated can be done in the background, allowing you to access other information while you wait on the app to load. In fact, mobile apps are becoming so functional and popular among consumers, a Forrester Research report (FORR) predicted that by 2015, nearly half of all corporate-issued devices will be mobile!Here in the US, we’re tied down by our internet speeds. While technologies for “4G” networks are growing, we’re still years behind other countries like Japan. For now, it’s just not feasible to store all your information on the internet. Mobile Apps, however, are great for storing larger amounts of information, such as videos and catalogues. And since the information is stored within the app, the user’s experience will be greatly enhanced.Bulletin Board advertising has been long rampant. But how effective is it? Like most people, you will likely forget the majority of billboards you pass on the way to your home or office. Mobile Apps, however, provide a form of advertising that you can carry in your pocket. The good news for business owners is that this new form of marketing via mobile apps is growing fast with no sign of slowing down. Consider the fact that in 2009, a mere 23% of people owned smartphones, compared to today’s 35% (Source: Neilson). This means that one-third of Americans have the potential to be reached through mobile devices, creating a world of advertising possibilities for business owners to seize.—————————————————————-Instead of just copying and pasting features of the six chosen apps for the research, adding some of the information above would be a good way to get our stakeholders onboard with the project. The question of ‘why I/ we need an app, when I/we already have an existing website’ would definitely be on their minds. I found myself asking the same question when I was putting together my part of the project. This article sums it up nicely, with stats to back it up. I will try to turn the stats into visual for better and faster reading.

____________________________________________________________________________________________

More research: Smartphone Users Aim for Apps Over Mobile Web

information from: http://chiefmarketer.com/print/mobile-targeting/smartphone-users-aim-apps-over-mobile-web

If you’re torn between developing a mobile app or optimizing your Web site, consider what device users you’re targeting. New research from mobile analytics firm Flurry confirms a trend noticed last summer: U.S. smartphone users are spending more device time inside their downloaded apps and proportionately less of their day browsing the general Web.

In December 2011, the research found, the average smartphone user spent 94 minutes a day interacting with self-contained apps on a mobile device, compared to only 72 minutes a day on the web either from a desktop PC or a mobile device. Times spent in apps rose 23% from December 2010 to June 2011, and 15% from June 2011 to December 2011.

Growth in app time seems to be largely due to more frequent use rather than longer sessions. That increase in app use seems to be driven in part by a growth in the number of Facebook users checking and updating accounts away from their PC browsers. In June 2011, Flurry found that the average Facebook user spent more than 33 minutes per day on the web site; in December, that web-based use dropped to 24 minutes per day.

And interacting with Facebook and other social networks makes almost one-third (30%) of the time U.S. smartphone users spend in mobile apps, Flurry found—exceeded only by the 49% spent playing downloaded mobile games. They also spent 7% of their app time viewing mobile entertainment, 6% checking news, and 8% engaged with other tasks.

—————————————————————-

Again I am going to try visualise all the data so the stakeholders don’t have to read through the whole document.

NB: All this research is from 2011, find more recent data as the numbers would  have dramatically risen, this will get the stakeholders more on board with everything.

____________________________________________________________________________________________

Social and Mobile Channels Will Evolve in 2012

To help you keep up with the ways mobile and social media will evolve in 2012, here is a list of the key trends to watch, and suggestions for how to respond to your customers’ continually changing shopping habits.

Mobile commerce and social networks will continue to gain steam for merchants in 2012, and a key challenge for retailers will be keeping up with all the new devices, platforms and applications that make shopping more engaging. Neglect in any of these areas can mean a loss of customer loyalty and a major blow to your brand.

The recent holiday season and the activities we saw on mobile devices point to a key trend: mobile devices are becoming more prominent for purchasing, not just researching; additionally, the tablet is taking over the desktop as the preferred way to shop online.

During the 2011 holidays we saw a huge increase in sales from smartphones and tablets, according to an IBM Benchmark report, which showed that combined they accounted for 11% of total online sales, effectively double what we saw in 2010. The same study found that the conversion rate for iPad users was 6.3% in December 2011, compared with 3.1% for mobile devices overall.

And similar to the past couple of years, more and more consumers are turning to Facebook and Twitter to get input from social connections when making buying decisions. Additionally, a new crop of social networks has opened up new opportunities for retailers to connect with customers, including Google Plus (Google+) and Pinterest. Perhaps we’ll even see another addition or two to the social network community this year.

To help you keep up with the ways mobile and social media will evolve in 2012, here is a list of the key trends to watch, and suggestions for how to respond to your customers’ continually changing shopping habits.

Bring online shopping to tablets
You may be still trying to figure out how best to deliver an engaging experience on smartphones, and along comes the iPad to make things even more exciting. While tablets are considered by some to be yet another mobile device, the experience they offer is completely different, while also being unique to shopping on a PC. So you now must have three different variations on your site to address each type of platform – and consistency across all is critical.

One retail brand that’s currently addressing these issues while creating a tablet-friendly site is Totes-Isotoner, the weather accessories retailer. Totes-Isotoner saw dramatic growth in the number of sales on its mobile site last year, and is now working to create a similar experience on tablets.

According to the e-commerce team there, one key difference of tablets is that they don’t support Flash, so e-commerce sites that incorporate this feature will need alternatives for the tablet. Also, tablets don’t have a mouse, so users are limited in their ability to click on and zoom in on images. A tablet-oriented site needs to account for finger taps and swipes for this and other important functions.

Retool search and navigation
The growth of shopping on tablets brings new search and navigation challenges to retail brands, which must continually create new ways for customers to easily get around a site. Tablets offer certain benefits over smartphones: the screens are bigger, so content and images are easier to read and see. But again, finger-based navigation is tricky, so small text menus and lists of refinements are difficult to select. This is also true for onscreen buttons and page numbers.

Since search and navigation are key on smaller screens like those on smartphones and tablets, including merchandising promotions in search results and on navigation pages is a great way to draw in your visitors. This is particularly true for tablet shoppers, who convert at a higher rate than other mobile shoppers, as the December sales numbers show.

Blend search and social in online shopping
Studies show that mobile users spend 91% of their Internet time on social networks, which presents a great opportunity for your brand to connect with them on this platform and save them from having to leave to go to your site.

For example, you can add a search box to your Facebook page, similar to what motorcycle retailer Chaparral Motorsports has done. Make Me Heal, a provider of plastic surgery, beauty, and anti-aging products and information, also added site search functionality to its Facebook page, allowing fans to search its site right from the social network.

As a result, both retailers have seen deeper engagement with customers on Facebook, and more traffic coming to their sites from the social network. You can also allow your customers to use their Facebook login info as the sign-in for your storefront.

Additionally, when shoppers view search results on your site it helps to see what their social connections have said about a particular item. For example, you can include the number of ‘likes’ or ‘+1s’ a particular item has received in the search results, and also allow visitors to reorder results to see products with the most likes at the top.

Address new social networks on the rise.

Pinterest, the online pinboard, is generating a good deal of buzz because of its novel approach to the ‘like’ approach, by allowing customers to put a ‘Pin It’ button on pages with images or content that they like. The site increased its audience from 418,000 visitors in May 2011 to 3.3 million by October, according to ComScore.

Pinterest has been slowly rolling out tools for brands – you can now add “Pin It” buttons to products so that shoppers can add their favorite items to their Pinterest page. As Pinterest continues to evolve and see more activity, this could be yet another type of user-generated content to include in search results.

—————————————————————-

Although this information was written for retailers, the trends mentioned in the article still very much applies to the Institutions. Most if not all the trends mentioned in the article above can  be adopted so they apply to the institutions’ visitors.

Things to keep in mind when we design our application:

  • Consider designing for tablets as well, they are rapidly over taking smart phones, when it comes to the device most used.
  • Consider usability when designing the nav bars, etc, (small text menus and lists of refinements are difficult to select.)
  • Blend social media with institutions. Research shows that more people spend more time on social sites, than anything else on the web. So as the article mentioned, by integrating  the institutions in question into social media, we would be enabling more  traffic to the sites, deeper engagement with visitors.
  • Address new social networks on the rise. If we take the Pintrest example used, for the Museum for example enabling visitors to pin their favorite works from the museum, might be a good clever way to enhance user experience.

__________________________________________________________________________________________________________

Effective use of Typography in Applications for kids.

( UX matters, by Catalina Naranjo- Bock)

Published : June 7, 2011

As we all know , typography is one of the most important elements of visual design for graphic user interfaces. this article by Catalina Naranjo- Bock, focuses mainly on kids aged between 3 and 10 years old.

Using Typography in User Interface Design for Children.

In the article Catalina points out that kids’ tolerance towards reading greatly varies. Factors such as the kids’ age, and whether they are pre-readers, beginners, or intermediate skills, come to play. This is why she recommends minimising the use of text unless of course designing for specific areas of the app that have large amounts of text for experienced kids. These may be, community pages, forums, or game discussion boards.

Choosing the Appropriate Typeface.

Apparently kids (most of them) learn to read by reading from one letter to another, until they can make sense of the entire word. so by using  typefaces that have well defined contours and spacing between letters, gives a warm and inviting feeling. To showcase this, Naranjo- Bock uses the Sesame Street website as an example. In the image below you will see the use of rounded, playful, sans serif typefacesfor large headlines and interactive UI elements. And for the more adult like links, simpler traditional fonts are used.
Sesame Street website

Sesame Street website

” As the sesame street website demonstrates, a designer should have the liberty to choose fonts that have a very distinctive look and feel when creating applications for children. However, it is advisable to stay away from distorted, decorative, or cursive letterforms. Some fonts that offer optimized legibility, because they were designed specifically for kids, include the Sasoon font family and Gill Sans Schoolbook.”

Types of Fonts

because of their fresh look and simplicity, Sans Serif fonts are usually used in apps for kids. This can be an exception however for apps that are used as reading books. Kids usually read these with the help of a parent. The image below is the mobile app for the iPad, Alice. Toy Story Read-Along, and A Present for Milo also fall under the exception.

Serif fonts in Alice for the iPad

” The serif fonts Bembo Schoolbook and Plantin Schoolbook were designed specifically for easy readability and teaching language to kids.”

Typeface Styling.

“It is important to differentiate elements that are interactive and make it clear to children when they can tap, click, or interact with something. Therefore, the text in links and labels for buttons is generally highly stylized, as are titles and headings.”

To be able to do this, it is advisable to avoid using extra bold/ extra thin letter forms, drop shadows, italics, underlining, caps and colour. Testing the styling during the designing process is very much encouraged, especially when working with preschoolers and reading beginners.

” … it is essential to test the usability of an application with kids of different ages within your target age range and reading levels. If they experience any difficulties or spend considerable time reading and understanding your text, you should simplify the typographic styling, the background, or both.”

Typographic styling on Mattel’s Hot Wheels Web site

The Hot Wheels website is a very good example of the over use of caps, bold italics, and in color, with drop shadows, gradients, and contour lines over textured backgrounds.. Although all this is in theme with Hot wheels, it easily becomes very hard for kids to scan thee pages and identify the interactive elements straight away. As mentioned in the Origin’s top ten tips when designing for kids, ” Engage immediately, but don’t confuse them…”

Other things to keep in mind!

1. Follow basic principles of typography.

“Designs for children should follow the same basic principles of typography and visual communication design as any other design project. No matter how organic and playful the look of a user interface is, its layout should still have an underlying grid structure that displays information in the best way possible, carefully balancing all graphic elements.”

2. Use consistent layouts.

“In trying to make pages visually attractive to children, many designers end up with layouts that are a hodgepodge, disrupting users’ visual flow. Always remember to use layout patterns that achieve a good balance between text, color, and graphics in all sections of your applications, and use the same fonts throughout. And even if you are working with a very colorful and vibrant layout, the use of negative space, or whitespace, is as critical as ever.”

3. Strive for legibility.

“Keep in mind that most children are not going to read entire paragraphs of text unless it is critical to their experience with an application—as with game instructions or Help pages—it relates specifically to their areas of interest—for example, community pages—or text is the core content of an application—as with digital books. Furthermore, children below 6 years of age can cope with only individual words or very short sentences.

But even if you are not working with large blocks of text, it is imperative to observe the following guidelines to make sure any text content is as legible as possible:

  • alignment—As in any other design project, having consistent alignments between links, headlines, sentences, and paragraphs is key. It is also crucial to verify that the type of alignment you are using is not interfering with children’s ability to read text, which usually occurs when using centered, justified, or right-aligned text.
  • type size—Use font sizes that accord with children’s developmental stages. For example, preschoolers and beginning readers require a larger type size than is usual for experienced readers. This is especially important for links and button labels. At the same time, it is common practice to use outsized headlines and titles to capture children’s attention and divide content into sections using visual hierarchy. On this point, research studies focusing on online typography for children state: “Generally the larger, 14-point font (print) size is considered to be easier and quicker to read, as well as being more attractive and more desired….”
  • line width—When you need to include paragraphs or long sentences, be sure to use a line width that is consistent with the span of a child’s focus on a screen, which can be shorter than that of an adult. You can determine what is appropriate according to the age of the child and the size of the screen—mobile phone, tablet, or desktop—as well as through usability testing. At the same time, be sure to use generous leading, line heights, and good separation between sections, so kids can easily identify different letter forms and chunks of content.
  • no extra work—Avoid making users do extra work to read text—as is the case with animated text, where children would need to read words while trying to follow their movement on the screen—or making children use scroll bars or other interactive elements to see all of the content.

____________________________________________________________________________________

NOTE TO SELF.

Some helpful/ interesting resources to refer to .

1. http://www.webdesignerdepot.com/2009/02/7-interface-design-techniques-to-simplify-and-de-clutter-your-interfaces/

2. http://www.webdesignerdepot.com/2010/10/how-to-design-a-great-user-interface/

3.  http://www.netmagazine.com/tutorials/user-interface-design-iphone-apps

4. http://www.topdesignmag.com/22-superb-examples-of-mac-app-interface-designs/

5. http://www.mademan.com/mm/10-best-iphone-apps-adults.html

6. http://uxdesign.smashingmagazine.com/2012/04/12/building-emotion-into-your-websites/
_______________________________________________________________________________________________________________________________________

All things art.
http://apps.toura.com/british-library/treasures

http://www.funeducationalapps.com/art-and-crafts-apps-for-kids/

_________________________________________________________________________________________________________________________________________________________________________________

Final Output – interactive PDF. here are some tutorials on how to do it.

http://www.dummies.com/how-to/content/create-interactive-pdf-files-using-indesign-cs5.html

http://help.adobe.com/en_US/indesign/cs/using/WS328f5ee33f08f77d1e63e3d120f2667a4c-7ffe.html

 
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