Demo

Hi,
I posted below the video about our final browser. Enjoy!

 

Basic implementation

We would like to show you some screens of our project. So far we have a basic implementation of the main page of the web application which contains the sidebars menu, the top bar with “go back”, “go forward” and “refresh” buttons, the search engine with advanced search on the web (Google search api) and the “Sign Up”, “Sign in” and “About” links. We’ve also implemented a tab menu in which we would like the pages as “About”, search results, categories, saved link and widgets to appear.

Mainly, to develop and to create interaction in our application we used html code, javascripts and jquery UI library and php for “Sign in”, “Sign up” pages.

For now, the main page looks like this:

Activating the “+” button to add new tab in the tab bar, a new empty tab will appear. Tabs have the sortable property, they can be switched between them and they look like this:

In the “About” tab is opened the page “About” by clicking the link from the top bar and looks like this:

The sidebars are opening on mouse over them action and disappear if the cursor lives the area.

The left side bar looks like this:

and the right sidebar looks like this:

On each them there will be icons of categories, links and widgets which are going to be opened in tabs.

Introducing words in the search bar, the results relative to the information searched are going to appear in the “Results” tab. The advanced search provides the options for searching pieces of information, images, videos and news relative to the introduced words.

A web search looks like this and the results are displayed similar with google results, with links relative to the search input. On the bottom of the results, there is a “more” button for displaying  8 more found results:

Searching for images looks like this:

Searching for videos looks like this:

And news search looks like this:

New steps in developing and designing the project are going to be fallowed by our team to deliver the best final solution.

 

And another one (meeting)

Yesterday we had another meeting. We all presented what we’ve found out from our research. Also we choose what each of us will implement. For our newt meeting, which will happen next week, we should implement a part of the application. Anda will take care of the search bar and tabs, Roxana will use AJAX for all pop-ups, Doru will make the slidebar and I will make the register/login/settings pages.

 

Another meeting

Yesterday we had another meeting. We’ve disscused what programing language to use, what we know and what should we search for. We agreed to search for tabs and web search implementation, AJAX pop-ups, sliders and document on how the database should look like. On the next meeting we will start the actual implementation.

 

Qoc

1. Q: How user will access the quick links?

O:button, pop-up-menu, list-box, combo box,accordion menu, sidebar

C: faster access and process, efficiency, mouse-interaction.

2. Q: How user will pick a certain page from his history?

O: from a ordered list of links or from a calendar

C: easy access

3. Q: Where categories and quick links will be located?

O: categories on the left and quick links on the right or vice versa

C: easy access

 

Video presentation

I post the solution wich we agreed with. We ilustrated it in a video presentation.

http://youtu.be/RDUQngIACwI?hd=1

 

Story Board

This storyboard can be heared on the video presentation.

Because there are different types of people with different interests, we choose to customize the application according to user profile.
The application requires sign up and sign in.

When the application first opens, you will see the page “about”. Here the application is described and we can also see a video presentation.

At the top,we have the logo  of the application. Following, the forward and backwards buttons,and a search bar. In the top right we have links to register, sign in, and about page.When you sign in, the link will change the logout link and the register link will disappear.The oposite happens when user click sign up.

There is a tab with the possibility of adding new tabs, and the program description.

To begin with, we assume that you do not have an account, so we go on the link to register. There are some fields that must be completed and the submit button requires email confirmation. Once you clicked on the link received on email, you are redirected to your account information page.As you can see, you are automatically logged.

In the upper left of page, the register and sign in links dissapears and the username followed by logout link appears.

You are being asked your full name, gender, birth date, city, country, social status and domain activity. The save changes button appears and also a exit button if you don’t want to complete that fields for the moment. Domain activity is an important factor to decide wich category are selected by default. Gender is also important, because the theme-default changes according to the user choice.

Next comes the pop-up preferences where you can configure categories you want to be available. You can also select the desired language for interface. The default selected categories are favorites links and mail. Depending on the domain activity, another category will be selected by default.
 
Further options appear for quick links. By default are marked wheater and calendar. Next the options for theme appear. If the user has chosen the female gender, it will be selected the pink theme, and if chosen the male gender it will be selected the blue theme.
Any of these default options can be changed, if user wants other categories to be added in the menu.
Pressing the save button, the changes are saved and the user is redirected to the main page .

Quick links appear in the right side on a sidebar when you take your mouse over it. On the bottom is a button bar with the sign plus, allowing this button to add a new quick link.

Right Clicking on a quick link, a menu appears with options “edit and delete.

Categories appear in the left side on a sidebar when you take your mouse over it. On the bottom is a button bar with the sign plus, allowing this button to add a new category.

Right Clicking on a category, a menu appears with options “edit, delete, add links, add widgets. ” Pressing edit you can modify the category name or change icon, pressing delete you can erase category and pressing add link or widget you can intodruce a new link or a widget in the category you previously selected.

By clicking on a category, the widgets and links for that category appear in the main tab. For a more structured view they are divided by type.
move your mouse cursor over a link, and you will see a picture for the link, if the link was already visited once. Clicking on a link or widget, it will be opened in the same page.
Clicking the logout button you will be sent backs to the about page.

 

Used design patterns

After analysing our wireframes, we’ve discovered these design patterns:

– Search : when users need to find an item or specific information.(we used this in the top of the application; used to search on the net)

– Login : when users need to identify themselves so that stored data about/of them can be used in the process they are in (top right corner)

– Register:  when users repeatedly need to (re)enter a large amount of personal data (top right corner)- Customizable Window : when users want to have fully personalized content (used to customize the the main page)

– Country selector, Date selector, Language selector… : when users need to select a date or a time period, their favourite language or their country (used when completing the account info and settings form)

– Constraint Input: when user needs to supply the application with data but may be unfamiliar with which data is required or what syntax to use (used when completing the account info form)

– Form: when users need to provide personal information and send it to a service provider (registration, login, account info, settings )

– Retractable Menu: when users need to access the navigation but they may need the screen space even more (two retractable menus placed on the right and left sides of the page)

– Directory Navigation: when users need to select an item out of a set (the widgets and links are displayed grouped into categories)

– Tabs: when users need to access a particular section of the entire avaiable information (placed in the top of workspace)

– Thumbnail: when designer wants to give the user an idea of how an image, movie or page looks like,              but doesn’t want to display the full-scale image, movie or page because of download time and screen space. (when the user make a mouse-over a link, a sugestive picture appears)

– Action Button: when users need to take important action that is relevant in the current context of the page they are viewing.They must be made aware of the importance of the action in relation to other actions on the page or site (used when we want to submit a form, when we need to perform a decision action)

– Stepping: when users need to view/act on a lineair ordered set of items. (used when we want to see a previous web page or a next page to see another widgets)

– Paging: Long lists of similar looking data, such as search results, are difficult to make sense of.(used when adding a widget)

– Center Stage: when users need to know where to find the important things in relation to all the things on the page (user in the main workspaces placed in the center of the page)

– Calendar Picker: when user wants to find or submit a particular piece of information based on a date or between a date range.(when completing birthdate in the account info form )

– Input Prompt: when the user needs to enter data into the system (used in the search field)

– Tour: when the user need to learn about an offered service or product or make the decision to join a service or buy a product.( present in the about page to inform the user how the application works)

– Overlay: when user needs to be notified about something important, or additional/related information needs to be shown and it is important to keep the user on the same page.(when user wants to edit and add something)

– Vertical Module Tabs: when you need to find a way to show selection-dependent inputs or provide a way for the user to navigate through one or more stacked panes of content without refreshing the page.(for the account info and preferences tabs)

– Multiple Selection from a Small List: when users need to be able to select multiple items from a small set of possible items.(when selecting preferences and account info)

 

Use Cases

Launching the application:

 

 

 

 

 

 

 

 

 

 

Doing other actions:

 

Wireframe

Hello, people!

Me and Doru have finished the wireframe.

I post below some pictures and explain some steps to use our browser. Enjoy:D!

First picture shows the start page with a presentation and a movie training.

If you go with your mouse on one of the sidebars, you will see this:

There are some categories with links and widgets organized by user. Also you can edit,delete or add categories, widgets and links.

To change settings or preferances, user can acces the next meniu:

If user clicks on Add widgets button, the next window will be opened:

And user can add all the widgets he wants.The widgets will be added in the category previously selected.