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 


 

  I have download a lite version of this app (due to need to pay $2.99)

• clear images, name of the fish on top
• brief description which let fisherman know how to differentiated the fish 
• available similar fish name

•  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

·      Is a social networking photo app (similar like instagram)

·      For iphone and android

·      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 

·      FILTER (most fun part)

·      Unique filter, such as Disco, Americano, Bokeh effects

·      Can add characters into your photos (like mood)

·      Like photos, comment photos

·      Can import multiple images (not like instagram cannot do so)

·      Can change layout design which is really helpful

·      Can insert hashtag (searching)

·      Location info available

·      Can post your images to facebook or twitter

·      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.

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

3 keywords

3 keywords attract people use my app

1. LEARN
2. FUN
3. TIME SAVING


Recall what is my app about: 

• this is a search engine (for fish recognition)
• user upload photo and click "search"
• app recognize the photo and give user the information

add on: user can share photo to friends and followers, writing caption of the picture and followers can "like" or comment. 


1.LEARN

• user can gain knowledge/get information of the fish
• such as the name of the fish, habitat and location (where you can find this particular fish)   
• so, user can learn something after they went diving and snorkeling
• but of course, not everyone wants to know details of the fish, yet the new diver/snorkeler would like to know the basic information of the fish they know. 
•  why? because as a new diver, i would like to know what i saw underwater, what the fish name, how big can it grow? dangerous? friendly? 
• curiosity kills a cat.   

2. TIME SAVING

• book is static, instead of using book, this app is faster than a book
• by using this app, user can get information faster than flipping a book  

3. FUN

• is a fun way using phone to get information because book is static
• you can share photos to friends and followers
• unique: filters are interesting, unique color
• share your information to friends and followers
• followers can like and comment the picture you upload  

Visiting guest/ project discussion

Feedback from guest about project:

• Not a cool piece if this is not a LIVE data
• Think creatively
• Idea too constraint 
• What if can get live data underwater?
• Let's say if everything is possible, think creatively and ideas for fish id. eg: user take photo underwater and straight away get the information? underwater can use internet? call data out underwater?
• Mask camera? push a button straight away get the fish details?
• Recognition today is still improving, people are exploring about recognition, FB has face recognition
• How bout an installation piece? fishes swimming around, user get the feeling underwater, using photo to take picture and get the information\

 Respones

• Before idea was user snap a picture underwater and straight get the information. Problem: cannot get internet underwater. Solution: build in database. Question: diver pay a price diving and get information down there? taking time to read in this 45mins diving time? Solution: Decided to do an app, which user can upload a picture taken underwater, and get the information after diving/snorkeling. 
• I was very worry about the programming part because I never learn about Java scripting, so i do consider a lot and try to figure it out about the fish recognition first. Perhaps now i couldn't download the software and trying to figure it out find solution to solve this main problem first. (After i can solve a problem maybe I can do similar idea like Instagram, user can upload their photo to show friends and followers. )
• LiWen was giving a hit for the idea which can do a installation piece, and also live data. Using projector to project the whole picture of underwater, fishes swimming around and user can use the app to snap a photo and get information. This is a good experience for user, who are not diver or who interested in underwater! 

*I would definitely consider the installation piece (everyone can interact with), but firstly i like to solve the scripting of fish recognition!  

Feedback and Response

• Overall the statement of intent is weak in structural, writing skill and word choice are weak.

( I would like to prepare the proposal early two weeks of the deadline in next submission, asking friend to help in my writing skill and also e-mail/tutorial with Sweii about the proposal.)
*To improve my English, i would definitely read more books and movies! Probably need to improve English grammar and sentence structure...

• If the upload of photo is done after the dicing or snorkeling, what the chosen platform needs to be mobile phone? why not thers?

( The reason why I choose mobile app because not everyone would bring laptop to island, due to heaviness and troublesome. Some of the resorts have no available computer and Internet too. Even there is available computer, you need to pay for the use. If user has underwater housing for phone, they can just snap and straight away upload the photo and get the information.

Besides the fish recognition, I wanted to do something like Instagram, user can upload their photos and share to friends and followers. Unfortunately, I were weak in programming and I NEED to solve the problem of "fish recognition" programming part FIRST due to now i fail to install the software of Neuroph and Netbeans. *Will find a solution this week, probably borrow friends laptop or come to school. )

• How It is multimedia thing?

( User taking photo through this application and upload to this application, which user can interact with. After uploading the photo, this app will recognize the photo and give information to user. the interaction between the user and the phone's app)

•  What it does? How it works?

( Now, the main point of this app is "fish recognition". I would like to create this app for the new diver and snorkeler, who wants to learn and get information in what they saw underwater. After user took a picture of a "fish", user can upload the photo in this app, then this app functioning to recognize this picture and give the fish information to user. Beside, the given information allows user to learn something new about the fish, the characteristic of the fish, how to let user remember the fish!)

• Important idea 

( 1. LEARN - user can get information and details of what they uploaded. they can get the name of the fish, size, habitat and location,w here you can find this particular fish. So, user can learn something after they went diving or snorkeling.
  2. FUN - is a fun way using phone to get information rather than a book. Book is static and need to flip around the book, pages to pages to get information.
 3. TIME SAVING - Instead of using book, wasting time to flip. By using this app can save time and get information straight away. Easy and fast.

• Genre

( The genre of my project is "generative art", which "refers to any art practice where the artist uses a system, such as a set of natural language rules, a computer program, a machine, or other procedural invention, which is set into motion with some degree of autonomy contributing to or resulting in a completed work of art." So basically using computer program to create this app and transfer to mobile phone and output information to user. Again, user upload the photo, this app scan/read through the photo, recognize it and output information to user. )

• Form

( This project is in a form of mobile application, which is "fish recognition". This app would recognize the photo which uploaded by user and output information for user. Overall the view of this app is vertical. )

• About project 

( I have done some research of the image recognition/software such as Netbeans and Neuroph but haven uploaded yet. Will updated before next lesson start. )



*Analysis is weak because hardly put the response after reading on research. I would summarize all the research i found and adding notes start from NOW. I know giving thoughts are very important after reading/research too.



















 

Statement of Intent

Click here to view the PDF file of statement of intent

Recognition

Recognition by Components
and the Geon theory
(Biederman's Model)

We recognize hundreds of different 3-dimensional objects every day. We rarely think about how we are able to recognize so many objects, but there has been much research and many theories explaining how this is possible. One of these theories is the Recognition-by-Components Theory. The basic assumption of this theory is that any given view of an object can be represented as an arrangement of simple 3-D shapes called geons. There are many different geons, including such shapes as cylinders and cones, among others. These geons can be combined in many different ways to form countless 3-dimensional objects. According to Irving Biederman, any given person is familiar with about 30,000 objects, and recognizing them requires no more than 

For more information please visit:
http://faculty.mercer.edu/spears_a/studentpages/geon/webpage.html

Object recognition

      Every day we recognize a multitude of familiar and novel objects. We do this with little effort, despite the fact that these objects may vary somewhat in form, color, texture, etc.  Objects are recognized from many different vantage points (from the front, side, or back), in many different places, and in different sizes. Objects can even be recognized when they are partially obstructed from view. 

While it may be obvious that people are capable of recognizing objects under many variations in conditions, it has been thought that pigeons may not possess the same range of capabilities.  It has been proposed that pigeons act as "perceptrons," by analyzing simple features of objects and using those features to recognize objects.  If the pigeon were a perceptron, then it would not be able to  recognize an object that varied slightly in form or was seen from a novel viewpoint because the features would be altered.  Moreover, a pigeon would be unable to discriminate between two objects that contained the same features, but with a different organization.

http://www.pigeon.psy.tufts.edu/avc/kirkpatrick/ = this link talk about how he do the experiment of object recognition  I.   Introduction
         One view of object recognition in pigeons
     


This link is about an introduction to pattern recognition,by Luis Gustavo Martins's slide show, which has include human and machine perception, pattern recognition, the process, the features. there are some slides about fish recognition (a case study), fish classification:
http://www.slideshare.net/lgustavomartins/introduction-to-pattern-recognition