graphical user interface prototypes by sima sodagar

56
Graphical User Interface Prototypes by Sima Sodagar

Upload: ernest-leonard

Post on 13-Jan-2016

213 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Graphical User Interface Prototypes by Sima Sodagar

Graphical User Interface Prototypes

bySima Sodagar

Page 2: Graphical User Interface Prototypes by Sima Sodagar

GUI Components

Four major buttons Call, Phonebook, Setting, Exit are the first components and we include them in a way so they can be easy to reach all the times. This will make it easy to start, handle and terminate a connection. In addition each of this main buttons leads to their main pages.

Note: Since Minisip is an application instead of “shut down” option we designed the button “Exit”.

Page 3: Graphical User Interface Prototypes by Sima Sodagar

Four major buttons: Call, Phone book, Settings, Exit

Page 4: Graphical User Interface Prototypes by Sima Sodagar

Modal widow

To avoid confusion and opening of many different windows that is hard to manage, our GUI is designed in a way so that a single base window appears in the left bottom of the screen. The window is fixed and only the content is changed. To avoid the confusion there are some back arrows to lead the user in the first place and the number of hops to reach a destination is not more than three.

Page 5: Graphical User Interface Prototypes by Sima Sodagar

Modal window (flow of information change in the same window controlled by forward and backward arrows)

Page 6: Graphical User Interface Prototypes by Sima Sodagar

Athentication(Login)

•Optional authentication:To avoid password ,for the scenarios that password is not needed, user only enters the user name with no password and user will be labeled as unauthorized .

•Remember passwordTo avoid entering password every time using the application system can remember the user name and password , how ever the system may forget the password from time to time.

Page 7: Graphical User Interface Prototypes by Sima Sodagar

Call page includes:Double functional dynamic search window: when you enter the contact name and number a list of suggestions will appear this search, for example when you enter “K”, a list including the contact names which start with “K” will appear and you can pick from that list for saving some time. Another function of search window is that when you pick the number to call from a list like phone book and my favorites by clicking on the contact name it will appear in the search window so you can push the green call button to the right of the search window to call.Multiple account:You can pick different accounts to call with.Recent calls: Includes Placed, received and missed calls plus show all calls to show the preview calls in a time order.Add contact

Page 8: Graphical User Interface Prototypes by Sima Sodagar

Call page

Page 9: Graphical User Interface Prototypes by Sima Sodagar

Recent calls

Page 10: Graphical User Interface Prototypes by Sima Sodagar

Placed callsNote: Add contact is button is active when the number in recent calls is not saved in the phone book.Note: Exact time and date should be mentioned in the recent calls including (missed, placed, received calls).

Page 11: Graphical User Interface Prototypes by Sima Sodagar

Received calls

Page 12: Graphical User Interface Prototypes by Sima Sodagar

Missed calls

Page 13: Graphical User Interface Prototypes by Sima Sodagar

Instant Message: The conversation window appears in the left foot of the call windows. The size and place is flexible for that.

Sending Instant message

Page 14: Graphical User Interface Prototypes by Sima Sodagar

Waiting for a call stabilishment

Features:

Call(Recall), End call : To establish and terminate a call( The usage of call button is for when you pushed the call before and you could not establish a connection with the selected contact, so you recall the contact by pushing call button)Timer: To show the conversation time duration

Sound: To mute the or activate the sound Microphone: To mute or activate the microphoneCamera: To inactivate or activate the main camera IM: To send instant messageAdd / stop camera: to add more cameraAdd/ stop Stream screen: to share the screen

Page 15: Graphical User Interface Prototypes by Sima Sodagar

Point- to-point scenario(before adding camrea and sharing the screen)

Page 16: Graphical User Interface Prototypes by Sima Sodagar

Point- to-point scenario(After adding camrea and sharing the screen)

Page 17: Graphical User Interface Prototypes by Sima Sodagar

Multi-party(Reflector) scenario(before adding camrea and sharing the screen)

Page 18: Graphical User Interface Prototypes by Sima Sodagar

Multi-party(Reflector) scenario(after adding camrea and sharing the screen)

Page 19: Graphical User Interface Prototypes by Sima Sodagar

Multi-party(Reflector) scenario (minimizing the whole windows and maximizing one window)

Note: End call button will close the whole conversation window

Page 20: Graphical User Interface Prototypes by Sima Sodagar

Incomming call window

Note: After decline the calling windows disappears .After accept a call the point to point conversation window will appear.

Page 21: Graphical User Interface Prototypes by Sima Sodagar

Contact management: One of the most important features in the new version of GUI is contact management part in the form of phone book that includes contacts part and my favorite’s part.

• Phone book: The phone book button is one of the primary options. It includes Contact list and “My favorites”.

• Contacts list: In the contact part there is the central name, URI or IP Address of the contacts which have been added to the phone book the order is alphabetically and their central names and addresses cannot be manipulated due to user requirements. The possible options for them are to delete, search, call and add them to my favorite’s part.

• My favorites: According to the security reason the information existing in the contact list cannot be edited and manipulated and organized according to the users will.

• Favorite’s option is new and the main reason to create that is the user requirements to manipulate and organize the contacts. When adding a contact to the contact list of phone book there is an option asking whether you want to add the contact to my favorites as well, if your want to do so the contact automatically saved in a group in my favorites named contact list, you can as well go to my favorite’s part and add contacts separately.

• Organizing contacts: organizing contact in the contact list is alphabetically but in “My favorites” you can define different groups and classify the contacts in them. The default group is contact list that is for the contacts that have been saved through contact list.

Page 22: Graphical User Interface Prototypes by Sima Sodagar

Phone book

Page 23: Graphical User Interface Prototypes by Sima Sodagar

My contacts

Page 24: Graphical User Interface Prototypes by Sima Sodagar

My favorites

Page 25: Graphical User Interface Prototypes by Sima Sodagar

My favorites(Add a contact to group)

Page 26: Graphical User Interface Prototypes by Sima Sodagar

Note: Delete group only applies for an empty group. So to enable “delete group” option, first all the contacts in that group should be deleted

My favorites(group options)

Page 27: Graphical User Interface Prototypes by Sima Sodagar

My favorites(Rename a group)

Page 28: Graphical User Interface Prototypes by Sima Sodagar

My favorites(delete an empty group)

Page 29: Graphical User Interface Prototypes by Sima Sodagar

My favorites(delete a group)

Page 30: Graphical User Interface Prototypes by Sima Sodagar

Add new contact

Page 31: Graphical User Interface Prototypes by Sima Sodagar

Add new contact

Page 32: Graphical User Interface Prototypes by Sima Sodagar

Edit contact (Only applies to My favorites)

Page 33: Graphical User Interface Prototypes by Sima Sodagar

Edit contact (Only applies to My favorites)

Page 34: Graphical User Interface Prototypes by Sima Sodagar

Add new contact to My favorites

Page 35: Graphical User Interface Prototypes by Sima Sodagar

Add new contact to My favorites

Page 36: Graphical User Interface Prototypes by Sima Sodagar

Add new contact to My favorites

Page 37: Graphical User Interface Prototypes by Sima Sodagar

Add new contact to My favorites(Choose from My contacts)

Page 38: Graphical User Interface Prototypes by Sima Sodagar

Add new contact to My favorites (Choose from My contacts)

Page 39: Graphical User Interface Prototypes by Sima Sodagar

SettingsNew feature: change language and advanced sttings

Note: The features in Minisip setting and account settings are more or less the same as previews Minisip

Minor changes is done and New part “advanced setting” has been added to the Minisip settings

Page 40: Graphical User Interface Prototypes by Sima Sodagar

Settings(Minisip Settings)

Page 41: Graphical User Interface Prototypes by Sima Sodagar

Settings(Minisip Settings)

Page 42: Graphical User Interface Prototypes by Sima Sodagar

Settings(Minisip Settings)

Page 43: Graphical User Interface Prototypes by Sima Sodagar

Settings(Minisip Settings)

Page 44: Graphical User Interface Prototypes by Sima Sodagar

Settings(Minisip Settings)

Page 45: Graphical User Interface Prototypes by Sima Sodagar

Settings(Minisip Settings)

Page 46: Graphical User Interface Prototypes by Sima Sodagar

New feature (Optional authentication)

Page 47: Graphical User Interface Prototypes by Sima Sodagar

Settings (SIP account settings)

Page 48: Graphical User Interface Prototypes by Sima Sodagar

Settings(Sip account Settings)

Page 49: Graphical User Interface Prototypes by Sima Sodagar

Settings(Sip account Settings)

Page 50: Graphical User Interface Prototypes by Sima Sodagar

Settings(Sip account Settings)

Page 51: Graphical User Interface Prototypes by Sima Sodagar

Settings(Change language)

Page 52: Graphical User Interface Prototypes by Sima Sodagar

Delete a contact (from my contacts)

Page 53: Graphical User Interface Prototypes by Sima Sodagar

Delete a contact(from my favorites)

Page 54: Graphical User Interface Prototypes by Sima Sodagar

Exit the application

Page 55: Graphical User Interface Prototypes by Sima Sodagar

Recent calls(All calls)

Page 56: Graphical User Interface Prototypes by Sima Sodagar

Help,My favorites