Wednesday, 12 September 2012

Layout/ art direction (mobile)

Layout in my mind:

1. simple/ clean/ well organize information
2. not puting chunk of information, only important information
3. such as mini encloypedia
4. let user easy to remember/ recognize the fish, memorable


Mobile User Interface

What is the requirement for UI design?
·      Product goals
·      User needs
·      Conceptual design
·      Prototypes
·      Evaluation
·      User testing

Designer can sketch out the product design, creating mood board or mind mapping before start designing. Create visual design or interactive such as prototypes of the product can develop a good product.

Evaluation: focus group of people and usability testing.

Based on the concept evaluation, designer can revise user interface, improving design concept, applying style, look and feel to design. Design must be accessible for user.

Repeating evaluation by improving product, such as work with the design with a team of people.

Collecting feedback is very important to a product. To improving the product, designer can do survey.


WHO ARE YOU DESIGNING FOR?
WHAT DO YOU WANT THEM TO DO?


1.     Understanding the Context of Use.
-       Think of the whole experience of your product.
1.     Environment
2.     Time
3.     Culture
4.     Device


Interaction Design Principles
1.     Learnability
-       a good interface design should be easy to use from the first time the user interacts with it. Function able for user, which gives user exactly to reach the goal. 

2.     Efficiency
-       Key tasks should be made as efficient as possible for user and number of steps it takes for a user to complete a task.


3.     Memorability
-       Frequency of use is the main factor in memorability, which is interface, should be easier to use each time the user interacts with it.

4.     Error Recovery
-       A perfect user interface, user should never be allowed to make a mistake.

5.     Simplicity
-       Visual design and layout should be clean, simple and easy to use. Usual tasks should be easy handle by user. Avoid unnecessary functionality.

6.     Mapping
-       What the user expects to happen next when they interact with the interface is exactly what should happen.

7.     Visibility
-       Designer should understand the user goals, important information should be the most visible and less important information should be less visible or none.

8.     Feedback
-       User should always be the one in control of the interface.

9.     Consistency
-       “Favorite” should always be displayed and act the same way across the entire application.

10. Satisfaction
-       How much the user enjoys and likes to use this application. 





1.     Design for Simplicity
-       Task can be related with the visual design
-       Reduce functionality
-       Keep navigation narrow and shallow
-       Avoid extra or unnecessary information on each screen
-       Reduce or remove preferences
-       Use progressive disclosure

2.     Design with Small Screen in Mind
-       Minimize user input
-       Avoid vertical and horizontal scrolling in each screen
-       User hyperlinking effectively
-       Provide useful error messages
-       Prioritize information


3.     Provide useful Feedback for user
-       Identify critical feedback
-       Ensure quick system response time

4.     Maintain Existing Design Standards
-       Use existing standers
-       User real world metaphors

5.     Respect both the physical and mental effort
-       Simplify complex interactions
-       Design for efficiency 





For more information, please visit:
http://www.slideshare.net/OpenRoad/mobile-ui-design-user-centered-design-and-ui-best-practices 





Tips for Wireframing a Usable Mobile App Interface

Designers took a lot of time and energy to build mobile apps. Not only coding and UI design are important to build an app but also functionality. First, plan the functionality of the app. After planning designer can start programming immediately.

Wireframing is the best way to start off a mobile app. Wireframing is the design process where you layout each of the app’s view and details. Is a rough sketch of the app, personal decision and how much pre planning you need to be done.


Planning application views

Each application has few pages, so called views. Views can be defined important content, a table listing, photo gallery, etc. Designer needs to consider the many possible views to encounter. Root view - a place to start off, and first page for user to see when the application finished loading. Navigation between pages are very important. Application flow, A to B, B to C.


Navigation Routes

Sketch out the views, how the navigation connected, page to page.



User Interaction

Route out the functions. Use different shapes for the function content from the view of layout.


·      The process of sketching out an app interface design is very important
·      It gives you a chance to understand or the details of the app
·      Peeking into how your creation will look and feel
·      Easier for development
·      Understand what you need to programmed 



For more information, please visit:
http://speckyboy.com/2012/02/22/tips-for-wireframing-a-usable-mobile-app-interface/














Case studies of layout interface (mobile)

Find-A-Fish

This application is for fishermen to identify freshwater fish species that they may encounter anywhere in North America 


iPhone Screenshot 2 
  I have download a lite version of this app (due to need to pay $2.99)
    iPhone Screenshot 3
  • clear images, name of the fish on top
  • brief description which let fisherman know how to differentiated the fish 
  • available similar fish name





    iPhone Screenshot 4
  •  follow alphabet  a-z
  • images, name stated clearly
  • search bar on the top
  • if the user know the name of the fish can type in and get the information











  • there a lot information in one page
  • need to scroll down
  • remember the research before, designer must consider the sight reading for user, avoid scrolling information (so i will put the info in one page, make it clear and memorable for my user)












Features of this app: 
  • fish id images
  • descriptions and detailed information for fishermen
  • 61 most popular freshwater game fish of North America (full version but not lite version)
  • full color/high quality images, clear 
  • available search bar, easy for user to navigate
  • zoom in and zoom out of the image
  • proiding an easy identification 


further information:
http://itunes.apple.com/us/app/find-a-fish/id351829782?mt=8





Puddin.to
IMG_5279


·      Is a social networking photo app (similar like instagram)
·      For iphone and android

IMG_5289

·      Create an account, invite you friends, share your photo to friends or public
·      Followers from everywhere (countries)
·      Snap photo from this app
·      Or choose from own library
·      Import images 


IMG_5284


·      FILTER (most fun part)
·      Unique filter, such as Disco, Americano, Bokeh effects

IMG_5285


·      Can add characters into your photos (like mood)


·      Like photos, comment photos

IMG_5281

·      Can import multiple images (not like instagram cannot do so)
·      Can change layout design which is really helpful

IMG_5286

·      Can insert hashtag (searching)
·      Location info available
·      Can post your images to facebook or twitter

IMG_5288

·      Theres banner in your page  


   For more information, please visit:
   https://play.google.com/store/apps/details?id=com.kth.pudding

    
   






*Please visit http://tjwcfe.blogspot.com/ for my user interface design for this mobile application. this blog has all the progress of creating the interface design.


Wednesday, 15 August 2012

Functional model


Mobile application development


UC Description


FishCom
What user can do with this mobile application.
Participating Actors
New divers / Snorkeler
Search
1.     User clicks on the first icon, which is “Search”.
2.     First icon leads user to “Take a photo” / “Choose from Library”.
3.     User can choose either one, Take a photo or choose from library.
4.     Selected a photo then click “Next”.
5.     Information given after photo taken/selected.
Camera
1.     User clicks on the second icon, “Camera”.
2.     User can choose to take a picture or choose from library.
3.     Photo selected, Next to filters
4.     Choose any filers you like.
5.     You can rotate or burring the photo, just up to the user.
6.     Write caption of the photo, click NEXT.
7.     Photo showed for friends or followers.

UC Diagram


Neuroph