Sketches

rough sketches of layout of Picshare application. 

•  photo sharing site    photos feed
•  photo details section

• initial sketches 

• details sketches 

Digital sketch with annotations:

Use Case Diagram

I have done use case diagrams for my application to show the user experience and the key features of my app.

click on the image below to view the larger version. 

or click on the link below to view the PDF file: 
https://dl.dropbox.com/u/23409639/ucd.pdf

Brief description of flow diagram:
1. user logs in to accounts (Instagram/pinterest/tumblr, or all of them)
2. user chooses photo sharing sites to view photos
3. user shares photo and chooses the destination to share the photo.
4. user go back to photos feed and view the photos
5. user chooses and collect the photo they like either from instagram, pinterest, tumblr (as long as they have logged in)
6. user add label and save the photo to their collection
7. after collecting, user can choose to go back to view photos, to share photos or continue collecting photos.

this flow diagram basically shows the user experience where they can view, share and collect photo.

Change of Idea

My previous idea was to create an application for Instagram in Desktop version. But now I have decided to add some other features and improve the whole idea and concept of the desktop application. My idea was inspired by Tumblr and Twitter where they allow users to "reblog" and "retweet" which means users can re-post what other users have uploaded in that platforms. The purpose of doing "reblog" is to share other peoples' videos, links, photos, thoughts and many others to more and more people. This process emphasizes on: Sharing. Now Internet is widely used by many people for sharing purposes such as social media: Facebook, Twitter, etc..., where users can share their status, their activities to friends or family and even friends of friends.

This inspiration leads me to rethink my idea of the application. I was wondering why Instagram does not have the re-post feature where user can re-post other peoples' photos. I was thinking the reason of not having this feature is due to the copyright problem. People could just used other pictures and claimed it as his/hers. Therefore, I have came out with a solution which is: state the name and source of the original users in the caption of the photo by not allowing people to change or edit things to it. This solution could help to solve copyright problem where people will see the original source of the photo that posted. Beside, a "re-post" icon will be displayed and located on the photo itself to show people that it is actually grabbed from other people's photo to solve copyright conflict.

The purpose of doing "re-post" picture in Instagram is to allow users to share photos that they like to their friends. For example, I saw a beautiful/meaningful picture by this particular user and I wanted to share it to my other friends(where they are not the friends of the user). The fastest way to do this is to have a re-post function where I can easily share this to other friends WITH copyright of the user.

Apart from this, my idea of creating the application is to allow users to have plenty photo sources where they can view and share it to any platform they want. Therefore, I have decided to use a few photo sharing sites /app in my application (prototype purpose) which are Pinterest, Tumblr and Instagram. The idea was also inspired by Tweetdeck which I have posted earlier on where it can manage users' different accounts at the same time.

Desktop application Interface design Example

I have found a several desktop applications interface design. Those are the examples of sovereign posture (one of the desktop application categories) 

Caldera Interface Design

iTune's Interface Design

Skype Interface Design

Paint Interface Design

I have also found that the layout of these interfaces are similar which most of the navigation bar/buttons is on the left side of the window. 

Beside, the navigation bar also appeared on the top of the window in the interface design. These interfaces achieve balance as the right/middle side of the window used up most of the space and it is the content of the application where user is navigating it with a long time of period. 

iTunes, Skype and Paint interface appeared to be simple and clean as well as visually eye pleasing. It does not complicate the users while navigating the application and also there aren't much distraction in the interface design. The interfaces use icons and the color palette is kind of narrow which fits what the book has mentioned. 

Decision Making

Key concept: Viewing, Sharing and Collecting
This concept is inspired by a music player, it is a desktop application where users are free to search for music and download it to the application. Users can also play the music they have downloaded using the desktop app even without internet connection (once they are completely downloaded). The music that have downloaded will be stored and users are allowed to customise their playlist. 

Idea: Create an application (desktop) that able to manage few photo sharing accounts such as Instagram, Pinterest and Tumblr at one time and allows users to view and share photos.

Key features:

• re-post other users' photos from any photo sharing sites. 
• collect (save) favourite photos from any photo sharing sites. 

Function of the app: 

Users are able to log in to different photo sharing sites to view their photos feed using the application at one time. They will also able to view photos from the popular page and share photos to their own account. Users are also allowed to comment and like the particular photo they like by using the application once they logged in as the data from the photo sharing sites will then synced to the application itself. The application will also receive latest update by the other users in real time. 

Users are allowed to re-share the photo they like by selecting the platform. They can either choose to re-share to the same site or share to other photo sharing sites that they have logged in earlier. Users will then allowed to adjust the size of the photo according to their preference and add a caption to it. 

Besides, users are also allowed to collect the picture they like from the photos feed or popular page of the photo sharing site. They will then required to key in label for that photo. The photo that collected is stored in a collection folder where it contains different sub folders which named by the labels that they have entered earlier. Pictures will be grouped according to the labels they have entered so that they can easily find it. 

Specifications:

The desktop application will be 1100 x 690 pixel and it is compatible with windows users only (due to the limitation of time). 

The interface that is created will be only emphasize on the user experience which is:

- able to view photos once log in 

- able to share photos to other sites/ or same site

- able to collect photos to their collection

Name of the application:
The name of the app will be - Picshare
As "Picshare" sounds like the homophonic of "Picture"
Pic - stands for picture
Share - represents photo sharing 

and the 'C' within the "pic" stands for collection.

Basically, the meaning of the title is: picture collecting and sharing. 

Research on photo sharing

From a survey done by AYTM, shows that 31% of people said they don't share personal photos online and 44% said they do share but not often while 22% of them say they share photos fairly often and 3% said they share photos online everyday. After calculation, this shows that total of 69% of people actually do share photos. 

Of those respondents who share photo online, 22% of them said most of the photo they share are taken with cell phones, while 39% of them said they sometimes share using cellphones but sometimes not, and 40% said they never share cell phone photos. After calculation, there is more or less total of 75% of people actually don't share photos using cellphones. This shows that people actually share photos from other sources more than using a cellphone to take picture and upload. They probably share it when they browse through certain web pages or from other people's posts.

There are also 72.5% of the respondents said that they do not have any photo sharing app on their phones (or other mobile devices) such as Instagram. This also shows that they do share photos, but not using an application through mobile as most of them do not own any.

Beside, regardless whether or not they share photos online, there are 64% of them said they do enjoy when other people share photos online. This shows people are likely to see what other people have posted and they enjoy viewing them especially photos that are eye-attractive and that's also the reason why many people enjoy using Tumblr as it allows users to view and share the picture they want.


source: http://aytm.com/blog/daily-survey-results/instagram-survey/

Principle of UI Design

did some research on the principles of UI design for desktop applications in terms of the layout, visual design and user experience.

From this website: http://msdn.microsoft.com/en-us/library/aa511279#sizingspacing , it talks about the important things to design a window applications. Here I will be listing down the important elements/points that can be applied into my interface design later.

Design concepts

Visual hierarchy

A window or page has a clear visual hierarchy when its appearance indicates the relationship and priority of its elements. Without a visual hierarchy, users would have to figure out these relationships and priorities themselves.

Visual hierarchy is achieved by skillfully combining the following attributes:

• Focus. The layout indicates where users need to look first.
• Flow. The eye flows smoothly and naturally by a clear path through the surface, finding user interface (UI) elements in the order appropriate for their use.
• Grouping. Logically related UI elements have a clear visual relationship. Related items are grouped together; unrelated items are separate.
• Emphasis. UI elements are emphasized based on their relative importance.
• Alignment. The UI elements have coordinated placement, so they are easy to scan and appear orderly.

Additionally, effective layout has these attributes:

• Device independence. The layout appears as intended regardless of the font typeface or size, dots per inch (dpi), display, or graphic adaptor.
• Easy to scan. Users can find the content they are looking for at a glance.
• Efficiency. UI elements that are large need to be large, and elements that are small work well small.
• Resizability. If helpful, a window is resizable and its content layout is effective no matter how large or small the surface is.
• Balance. The content appears evenly distributed across the surface.
• Visual simplicity. The perception that a layout is not more complicated than it needs to be. Users don't feel overwhelmed by the layout's appearance.
• Consistency. Similar windows or pages use a similar layout, so users always feel oriented.

A design model for reading

Users choose what they read by the content's appearance and organization. 

• People read in a left-to-right, top-to-bottom order (in Western cultures).
• There are two modes of reading: immersive reading and scanning. The goal of immersive reading is comprehension.

• When using software, users aren't immersed in the UI itself but in their work. Consequently, users usually don't read UI text—they scan it. They then read bits of text comprehensively only when they believe they need to.
• Users tend to skip over navigation panes on the left or right side of a page. Users recognize that they are there, but look at navigation panes only when they want to navigate.
• Users tend to skip over large blocks of unformatted text without reading them at all.
• All things being equal, users first look in the upper left corner of a window, scan across the page, and end their scan in the lower right corner. They tend to ignore the lower left corner.
• But in interactive UI, not all things are equal so different UI elements receive different levels of attention. Users tend to look at interactive controls—especially controls in the upper left and center of the window—and prominent text first.

Flow

A layout has flow when users are guided smoothly and naturally by a clear path through its surface, finding UI elements in the order appropriate for their use. Once users identify the focal point, they need to determine how to complete the task. The placement of the UI elements conveys their relationship and should mirror the steps to perform the task. Typically, this means the task's steps should flow naturally in a left-to-right, top-to-bottom order (in Western cultures).

You know a layout has good flow when:

• The placement of the UI elements mirrors the steps users need to perform the task.
• UI elements that initiate a task are in the upper-left corner or upper-center.
• UI elements that complete a task are in the lower-right corner.
• Related UI elements are together; unrelated elements are separate.
• Required steps are in the main flow.
• Optional steps are outside the main flow, possibly de-emphasized by using a suitable background or progressive disclosure.
• Frequently used elements appear before infrequently used elements in the scan path.
• Users always know what to do next. There are no unexpected jumps or breaks in the task flow.

Balance

A window or page has balance when its content appears evenly distributed across its surface. If the surface physically had the same weighting as it has visually, a balanced layout wouldn't tip over to one side.

The most common balance problem is having too much content on the left side of a window or page. You can create balance in the following ways:

• Using larger margins on the left side than the right.
• Placing UI elements used to complete a task on the right.
• Placing UI elements used throughout the task in the center.
• Lengthening resizable or multi-line controls.
• Using center-alignment strategically.

Visual simplicity

Visual simplicity is the perception that a layout is not more complicated than it needs to be.

You know a layout has visual simplicity when it:

• Eliminates unnecessary layers of window chrome.
• Presents the content using at most seven easily identifiable groups.
• Uses lightweight grouping, such as layout and separators instead of group boxes.
• Uses lightweight controls, such as links instead of command buttons for secondary commands, and drop-down lists instead of lists for choices.
• Reduces the number of vertical and horizontal alignment grid lines.
• Reduces the number of control sizes, by, for example, using only one or two command button widths on a surface.
• Uses progressive disclosure to hide UI elements until they are needed.
• Uses sufficient space so that the window or page doesn't feel cramped.
• Sizes windows and controls appropriately to eliminate unnecessary scrolling.
• Uses a single font with a small number of sizes and text colors.

As a general rule, if a layout element can be eliminated without harming the effectiveness of the UI, it probably should be.

=======================================================

Beside from the website, I have also found some principles of design desktop software in a book called "About Face", by Alan Cooper, Robert Reimann, and David Cronin.

In the book, the authors mentioned that desktop applications fit into four categories of posture which are sovereign, transient and daemonic. For my case, the application that I will be designing is a sovereign posture because it is characteristically used for long, continuous stretches of time as the users of my application will be navigating the application for a long time when browsing through the photos.








There are few principles of sovereign posture design:

• optimise sovereign applications for full-screen use.
• should feature a conservative visual style. (not complicated visual, use minimal visual of style, toolbars and controls can be smaller than normal, keep the color palette narrow and conservative, avoid using big colorful controls.)
• should exploit rich input (keywords input, select, search, etc...)
• maximise document views within sovereign applications. 

========================================================


So, I have learned that to design a desktop application, it should apply appropriate flow of reading such as top to bottom and left to right in the content. The important content of the application should be placed in the middle of the window which uses up most of the space so that it is able to catch user's attention. put the important navigation buttons/elements on the top of window, upper left, or bottom right to avoid users miss see it as these are the placement that users will scan through while browsing/navigating an interface according to the source discussed above. 

The overall interface should be simple and avoid using unnecessary elements/graphics/design that might misleading or distract the users from doing a task. Keep interface simple, plain but aesthetically eye pleasing.