A&J wedding co

INTERACTION AND INTERFACE DESIGN
Since the all pages of interface is settled, I’ve create to map to clarify the mind, ,display interactions between each page, highlight the function of each button and notes the place which need to be refine for the interface.

I and my group believe that to figure out the logic of detail interactions between pages and brainstorm for some users behavior is a necessary step to push forward before coding. It will save time  for further movements. However, there’s no prefect in this stage, there shall be still much to refine after having the usability testing.

INTERACTION AND INTERFACE DESIGN

Since the all pages of interface is settled, I’ve create to map to clarify the mind, ,display interactions between each page, highlight the function of each button and notes the place which need to be refine for the interface.

I and my group believe that to figure out the logic of detail interactions between pages and brainstorm for some users behavior is a necessary step to push forward before coding. It will save time  for further movements. However, there’s no prefect in this stage, there shall be still much to refine after having the usability testing.

PROTOTYPE TOOLS COMPARE AND CONTRAST
Research in those prototype tools in the market, there are four ways to create a prototype.
First is to create one in an Application or web-based tool such as POP or Flinto, these tools are usually extremely easy to use, without a single line of code, they can create a sequence and connection of multi-pages easily. Some of them can even support various page transitions and support a good way to display. However, the disadvantages are also obviously, which is the intuitive action support is quite limited, and some of the UI elements are not functional within the prototype. Thus, in terms of presenting the ideas, these tools are easy use but limited in functions.
Second way is to create a prototype in a common presentation tools, such as Keynote and PowerPoint,  with the help of some plugin, which usually offers a comprehensive UI elements library, these tools allow users to create their idea easily usually with a lot more animation options, however, even in this method, it’s still very limited in supporting some of the intuitive actions such as scroll or swipe.
Third way is to create a prototype in Xcode, the official tools for iOS developer. Xcode is a powerful tool which combined almost everything in one. However, the figure out the proper use of this complex software takes time, and thus it won’t be chosen as our project prototyping tools.
Last method, the way we choose to deliver our prototype this time is through Web-app, create by HTML markup language combine with j Query. Although this way may involve some knowledge of coding, but the un-limitation in supporting various functional UI elements, page transactions and intuitive actions makes it good to re-presenting our ideas more precisely to the audience.
As shown in the excel, J Query is the only methods with the most appreciation.

PROTOTYPE TOOLS COMPARE AND CONTRAST

Research in those prototype tools in the market, there are four ways to create a prototype.

First is to create one in an Application or web-based tool such as POP or Flinto, these tools are usually extremely easy to use, without a single line of code, they can create a sequence and connection of multi-pages easily. Some of them can even support various page transitions and support a good way to display. However, the disadvantages are also obviously, which is the intuitive action support is quite limited, and some of the UI elements are not functional within the prototype. Thus, in terms of presenting the ideas, these tools are easy use but limited in functions.

Second way is to create a prototype in a common presentation tools, such as Keynote and PowerPoint,  with the help of some plugin, which usually offers a comprehensive UI elements library, these tools allow users to create their idea easily usually with a lot more animation options, however, even in this method, it’s still very limited in supporting some of the intuitive actions such as scroll or swipe.

Third way is to create a prototype in Xcode, the official tools for iOS developer. Xcode is a powerful tool which combined almost everything in one. However, the figure out the proper use of this complex software takes time, and thus it won’t be chosen as our project prototyping tools.

Last method, the way we choose to deliver our prototype this time is through Web-app, create by HTML markup language combine with j Query. Although this way may involve some knowledge of coding, but the un-limitation in supporting various functional UI elements, page transactions and intuitive actions makes it good to re-presenting our ideas more precisely to the audience.

As shown in the excel, J Query is the only methods with the most appreciation.

INFORMATION ARCHITECTURE AND WIRE FRAME FOR ALL PAGES
This is a whole structure tree for the project, with the eight major function page direct link onto the homepage, other subpages are link to each major function page. It’s always good to flatten the structure of and make each tasks easy to accomplished by users with no more than too many taps.

INFORMATION ARCHITECTURE AND WIRE FRAME FOR ALL PAGES

This is a whole structure tree for the project, with the eight major function page direct link onto the homepage, other subpages are link to each major function page. It’s always good to flatten the structure of and make each tasks easy to accomplished by users with no more than too many taps.

Homepage

Homepage

CASE STUDIES OF TO-DO-LIST 

There are a lot of versions of wedding to do list online, some are simply and easy, some are relatively comprehensive, some have incredible details, and most of them are arranged by time sequence, normally from about 1 year pre-wedding till the big day.

 

Some of the couple get themselves prepare from 1 year before the wedding, and the time sequence of the to-do-tasks works quite well in their case. However, not every couple has a fixed prepare time so they may want a task list order in different ways. In order to satisfy with various needs of users, we do a lot of research in users’ patterns and existing to-do-lists online, and customized our own comprehensive one. In our task list, task items can be ordered by milestone of important activities not always display as a monthly schedule.

 

In addition, in our project each item of the task can be assign to a specific member from bridal party, so all the task item can also be arrange and display in a sequence of people in charge.

Good content will engage your users, attract traffic and help build your product successfully.

Ken McGaffin on 17 November 2009 «Why content is crucial to your project and what to write»

Case inspirations for structure design

There are wide range of UI elements in iOS system, the screen shots above are some of them from built-in app in an iPad device. 

First inspiration is a split view in built-in app “setting”. Split View is specially design for iPad’s large screen, which seems an alternative to the one-level-per-screen structure of iPhone apps. In our project, I choose a split view throughout the major function pages, such as “Tasks”, “Party” page. The reason of using split view is for user to get access to more information in one place, it also consider as flattens the hierarchy by displaying two levels onscreen at one time.

Second screenshot is a Popover View from “Reminder” built-in app. A popover can display some information temporarily on the top of the current screen, which is an easy way to add detail without transit into another screen. Such strategy is widely used in our project in Tasks page.

In the bottom of the third picture shows the use of Tab Bar, which gives people the ability to switch between subtasks, or views. In our project, we use a customized tab bar in the homepage to classify some frequently used functions, such as wedding ideas and timeline.

The last picture is an example of a Modal View in Mail built-in app. Modal view usually provides self-contained functionality. In our project we use it in Log In page and the page before that, to make strengthens of the users perception and encourage them to complete the tasks.

We use most of these UI elements in standard while customized a little bit of their appearance, however, to respect and keep the same users habitat and make them feel the consistence is always our first concern. 

INFORMATION ARCHITECTURE AND WIRE FRAME FOR ALL PAGES

Storyboard is a easy use function in Xcode, the official software for iOS developer. The above picture in the top is composed of a sequence of the major scenes in our project, each of which represents a view controller and its views in brief; scenes are connected by segue objects, which represent a transition between two view controllers and explain their potential relationships. The whole project is a DASHBOARD centre structure, all major function is directly connect to the home page, and thus can return to HOME by simply one tap. 

Other three sketch wire frame are mainly describe the interaction and contents with in “Home”, “Timeline”, “Bridal Party”, “Tasks”, “Vendor”, “Guests”, “Ideas” and “Budget” page.

Exploring of Prototype Tools

Different from other prototype tools, Flinto is a web-based tool, it is easy use to make a Xcode storyboard like prototype for an App. Beyond than simply link pictures together, Flinto actually support all the transitions we expect from an iOS app, including Push, Modal, Flip, Fade In and None. In terms of gestures, Flinto also support for scrolling content. In addition, Flinto allows to customize icon, the Startup Screen and can be installed to your iOS device home page through a share link, all these features to make it more like a real app.