This page is a design guideline for the default phoneui.
Human Interface Guidelines
We need to write our own, many useful examples: Examples.
Screens on this page are mostly in mockup or branstorm stage, or they are just showing design from other app on which we want to base. Please don't be suggested too much and if you have some good idea - add it here!
General GUI issues
zoff99: --> some apps have "close" button, some you need to close with illume-"X" button. :-( we should decide for the standard apps (dialer, messages, phonelog, in-call-gui, contacts) if we want a real "close" button or omit that to have place for an other button.
if we want a close button, that button should always be in the same spot in all apps. i think it should be on the right always.
if we dont want a close button, than NO app should have one. and then an action like "back" or "undo" should be on the right. things like "call" "send" "ok" "yes" should always be on the left.
"option" or "more" should be in the middle always.
if these issues are decided, only then can the details of gui be finished, and button designed and so on.
see this ticket for weirdness thats going on now: http://shr-project.org/trac/ticket/708
I don't know what to do with that HoverSel?:
I don't use it at all in "real life" usage. Any better ideas for that space?
Generally - I think opimd-notifier design is the way to go. After adding configuration option of being dialog or fullscreen, and after changing what is described on sketch: "Action" button instead of "Reply" button, which displays InWin? with few buttons: "Reply", "Forward", "Dial" and maybe "Delete".
artek: IMO notification about new message should be show in upper bar, as it is in the Android. After touch upper bar, it expand, i choose message, and i automaticly move to message app.
I agree with artek. I think that notifications should be made via an icon in the Illume shelf, that upon being touched will expand to a nice window. I find things auto-raising to be somewhat intrusive. The one big problem with this approach is that it's reliant on Illume. nkinkade - Mon Aug 10 13:51:44 EDT 2009.
dos: what about shelf gadget displayin notification, and after clicking on it displaying notifier from sketches/screens? For me it should be configurable, as i really like opimd-notifier approach.
zeusOne: notifier icon in the illume shelf then correct application.
morphis: I think it would be great if we quickly remove this 'x' button in top right corner of the notifier window. Something like that for closing a window is not suitable for mobile applications. We should have some common way to close a window which is usable on every application the same way!
Yprum: I also believe that popping up windows are intrusive (like nkinkade said), I would like to have something between the two approaches, sincerely, the way android works on that I believe is really good. Is there anyway to tell in the shelf that notifier has something new? So you can open notifier and see it. Also notifier should always be accessible, no matter if there's anything new, so you can see the old stuff that happened (with the option to delete it). It would be nice if we could get to the notifier with a long press in the AUX button for example.
DareusP: I think that SHR should have a SHR-today as main screen and every notification should go there (something like SHR-launcher) and the current main screen should be "the applications section".
List of contacts. Every list item has contact photo on left and "quick dial" button on right, which dials first phone number (if contact has no phones, then e-mail, if not then something else... and if contact doesn't have anything, then don't display it at all). Every list item contains two lines of text: contact name and main field (phone, then e-mail, then ...) with type icon.
On right of list are chars, as in Qtopia. After clicking on some char list jumps to first contact starting on given character. If there is no contact starting at some char, it isn't displayed in list. Good "fancy" thing would be showing zooming-glass when holpding char, as in Qtopia keyboard.
Single click on contact display contact view:
I would like to see it a little bit more like 2007.2, but overall idea can be seen on this screen:
Contacts actions in contact view:
When multiple phones/mails are available and it's unclear which to select (only from contact view, from contacts list it selects the first):
Contact view should also have "contact history" which all calls and messages from/to given contact (as in 2007.2).
ajuch: Please make sure that the "quick dial" buttons are far enough away from the scrollbar. It happened to me often that I called people i didn't want to call just because I had no stylus and clicking a contact resulted in a call...
Ohad: Sometimes one contact have 2 mobiles phones or 2 faxes, in OM.2008 you can't add 2 numbers from the same type.
Also sometimes you work with some business with some different people (or some family with some people) and you want to put them in the same contact (the business name or the family name).
I can't see if you put a 'note' field.
dos (answering to Ohad): it will use opimd interface, so you can have as much fields as you want and you can store whatever you want in that fields. And handling 2 numbers from the same type is possible even now in opimd-contacts, so it will also be in phoneui lib.
dos: i have another idea, this time about "Quick dial" button. Look at Paroli contact list, and drag some item to right. I love that idea and I think we could use that for quick dial - when clicking, it calls, but when dragging to left, it displays albo "quick sms", "delete" etc. buttons.
zeusOne: no "Quick dial" on the contact list: when you press on a contact you go always on the contact details. Then in the contact details, the main fields could be clickable for firing an action. Click on the cell number -> call it, click on the email -> send to, ... so no action button in the bottom left and we can put dial button here.
morphis: Why not a quick dial button? I find it very usable. If I search for a contact in 90% of all cases I will call him and then I don't want to click through all contact details only to dial the person.
piratebab On the main screen, only 8 icons for my "favorite" contacts. Then a big icon "others" on bottom screen (finger friendly), and a big "CALL" button
When I touch "others", I have a new screen: on half bottom screen a keyboard finger friendly (ie, similar to the PIN code keyboard), and on the half top, the contact list. On half top right: 2 finger friendly arrows (top and down). I can use it to scroll the contact list, or use my finger directly on the list as today to scroll it
When I press a letter on the keyboard, only contact name that start with this letter are displayed. If I press an other letter, only contacts that start with these 2 letters appears in the list ...
Now how to use a contact: every contact have 2 or more phone numbers (home, cell, office, ...); One must be declared as "favorite". On the main screen, the "CALL" button is used to call the favorite number of the selected contact (1 touch on contact, then highlight it as selected). 2 touch on the contact open it, so I can see all the numbers and email, and then select witch one I want to use (1 touc on it and the call start). And contact can be located either on SIM or memory, it must be displayed without difference, similar entries must be treated as a single one (merging phone number from SIM or phone on the user view). An other functionality is to copy a contact from SIM to phone (and vice versa), of course after checking the SIM quota not exceeded. .
Yprum: Has anyone ever tried this? http://www.cs.umd.edu/hcil/fisheyemenu/fisheyemenu-demo.shtml (Java needed) I don't know if it has any kind of license that could give us problems, but the idea is perfect for this kind of use. The design of main screen is good, in the side of the letters a fast scrolling like the example, and then when your finger goes to the other side it makes slow scrolling for being precise. It can open at the end the contact where you lift your finger, saving you to tap on it (so no need for quick access options)
If anyway you want to have a quick action access, it could be by double tapping on the contact, so no special button taking space. Also I believe that the default quick action should be user decided, like someone might usually write more sms than make calls.
The main screen with 8 icons (or so) for favourite/most used contacts that piratebab talks about looks like a good idea to me, but there should be an option to disable it. But I don't like the arrows he mentions later. No arrows, finger scrolling is much better the way I said, leaving more space for more contacts.
When showing one contact information, every phone number, email address, etc, should be a button that displays the actions you can do. Specific fields to create: phone numbers, dates, text, places, nickname, emails, other contacts, each of them can have a name of field edited by the user, as happens with the icon. The phone number option is simple and needs no explanation (default name: "Phone"). Dates, should open the calendar app (default name: "Birthday"). Text, is also simple (default name: "Notes") it has no other option than edit it, copy it, etc. Places, it should be able to open a map app (default name: "Address"). Nickname is another way you can call the contact, so you can find it by different names in the list (default name: "Nickname"). Emails, I don't think I have to explain this one. Other contacts, It's a way of connecting contacts with others, so by looking at someone information, you can go faster to someone s/he's connected with. I think that's all I can think of. Obviously the order of the information is as added, but easy to change, maybe I find more important the address of someone than the e-mail, but I added it the last one. The first one should be the default one, in case there's any quick access option.
All this is just a how-to-use the UI, as it is shown in the pictures I think is good for the UI itself. And I love the history thing!
DareusP: +1 for favourite contacts like in Sony Ericsson phones
Currently there is shown an icon the name and a phone number in the list view.
I suggest that we remove the phone number from there, because a contact usally has more then one number and the app does not know which number the user wants to see. Additionally: why should there be a phone number in the list? the user is looking for a name, not a number (number resolving is done by automatically by apps not manually by user).
So my suggestion is, sth like this:
So that an icon is show if any phone number is present, another one for fax, one for an adress and one for a birthday, perhaps one for email and other things...
zoff99: i like (what dos wrote up there) the sliding thingy in paroli. where you can slide a contact left or right, to send sms, or to edit , or whatever. also PLEASE do NOT make double click on contact do an action. with your finger it is difficult enough to scroll, often i open up a contact by mistake because i accidentally double clicked on it. neo is too slow for such complex actions, please stop that. leave it simple. finger up/down -> scroll contacts touch contact -> select this contact press (on bottom) some button -> make some action with contact maybe use also that sliding thingy from paroli, which was looking really cool :-)
I think I like the apathy design for the actual messages, example:
I also think we should write our message (to be written) inside a bubble and we also need a char counter. is there anything else I'm missing?
As for the main window, I want to see both per contact (like in 2007.2) grouping (with info) and classic messages list (sorted by time of arrival)
Description of the UI, maybe sketches?
ohad: Is the Inbox and Outbox are separate or one list together? I think one list is better. Also if you can do that you can see that one message is a replay to previous message (like in GMail) it's will be great!
Is there a email client integrated?
TAsn (replying to ohad): I want it to to be msn/icq like, i.e just the flow of the conversation with history, so messages will be shown as replies even if they are not replies as they are from the same contact. as for the inbox outbox, well as implied, this is a per contact list that has both. as for the other main list, I think it should be screened by a filter, outgoing/incoming/both that'll set how it will be shown. I think this is the best solution, there's a reason why all the pim clients work this way, it's just good.
Furthermore, I think an email client is a gross overkill (at least at the start) as there are many great email clients out there and making a trimmed down not as good version of our own just won't cut it. Though I have to agree the potential it holds (seeing from the nokia's that do have it) looks promising.
piratebab For privacy reasons, messages must not pop up and appears on screen (I often leave my phone face up on my desk ....)
Yprum: I think that's all you can expect from the messaging app, if it does what TAsn says (letting you see all the received messages mixed or not with the sent ones) and seeing the messages as a conversation for one contact. And how do you see the new messages compared with the old ones? a different background colour (bad for colour-blind people)? or maybe a different kind of bubble surrounding the message (I believe this could be a good option)?
@Piratebab That's not something to worry about in this app, but in the Notifier
I've made some sketches for the message application as I would like it to be. It might look a bit complicated at first, but I think it sums up most of the features people use on this. First you can see the main view in the messages-app. It shows all messages in chronological order. Then with the button "show" you can decide which messages are shown to browse them faster. The information each message has is a number showing where are you in the list, a small icon telling if you received it or sent it, or wasn't sent, or is a draft... (there's need for more icons), the name or phone number of the contact, the date, and small preview of the message (maybe the information shown could be optional). Also I find it useful to show how many messages you've got, and maybe how much memory is used. Most of the options should be unreachable until one message is selected. By the way, one click selects a message, two clicks open it. When you select one, and press "show all" it'll show you all the messages from/for that phone number. Anyway, I've thought it would be useful to add another button in the "show" menu, that would say "By Contact". This would open a window where the user can select a contact and show all its messages (or none).
Second in that image, you can see the "per contact" view. I don't think I have much to comment there... except each message is selectable as well to make single messages operations (as delete, copy date, etc.)
Whenever you select to answer an existing message, or write a new one, this would show up, the only difference would be that later the contact is preselected in the answer option when selecting to whom send the text. This already happens in the actual message app, which I find well done, so I think to keep with that. I believe the image is self-explanatory, so I will just say that the number of characters will be shown together with the next limit (first limit is on 160 chars, then 320, and so on), it should also show how many messages you're going to send. Together with this, I've thought of the option "cut to 1 message", so if you go through the limit, it will cut chars until reaching the exact limit.
any question? :)
spaetz: Please do mark new/unread messages either with a star/unopened envelope or by displaying it with a different background color. Currently I get notified that I have 2 new messages, but I don't know which ones until I actually opened them.
zoff99: please do NOT make double click on message do any action. its very difficult with the neo, as it is very slow, you double click on stuff all the time per accident. also i am missing the "delivery notification report" feature, i use it all the time on my real phone.
I like the current PhoneLog? design, (except for the fact that it's gtk+ and the buttons row) so I tried to make those changes show in the pictures below: Just try out pyphonelog to understand the feel and usability as it's a lot clearer that way.
The buttons should be stretched, they are not here as I'm not even slightly talented in GIMP :)
- Incoming expanded:
Rakshat: In the phone log there need to be more options in the "more button". Currently one sees "add contact, numbers and duration". "Edit and call" and "delete entry" are two other options that I use a lot. Also how much speed loss is there if we also use the button colours (blue for incoming, green for out going and red for missed in the phonelog main display symbols for incoming, outgoing and missed?
Yprum: The idea of Rakshat is good, we should colour the arrows in the mixed view. Maybe also, slightly, the font colors... It would be easier to identify (but we shouldn't only rely on color, just in case a colorblind person uses SHR)
DareusP: i think that coloured arrows could help non colorblinded people :P buttons should be used differently in my opinion:
- 1 for "contact the contact" which opens a submenu to choose between "call" or "send an SMS"
- 2 for "info" with a submenu to see infos on the call: duration, delete call, ecc.
- 3 for "contact actions" with a submenu to add to the contact list, see the contact info
No solid ideas yet. Maybe it could stay as is, but with button for phonelog added.
Bumbl I would go further: I would drop phonelog 100% and just add a tab at the top of the dialer which presents the whole in/out history with the most recent items at the top Additionally i would make the dialer searchable for a) numbers (within the contacts and the phonelog) e.g. when i enter +43xx it should show me a hoversel with 3 numbers matching the number and b) persons with the help of the illume keyboard instead of the number widget I will add a picture of what i mean as soon as I have more time
piratebab CALL and CLOSE button must be in different colours (ie green and red) I order to select the good one in sun light (even if I don't live in florida, I am not able to read them today)
Yprum: Adding green colour to the "call" button (wherever it is) is a good idea. But not the close button, it would be confusing comparing it with the "release" button which should be painted in red. Another thing for the dialer, maybe add some 3D buttons instead of the plain ones. It would be easier to see. Also I believe it would be good to have two fields on top, one for contacts names and other for the number. So in case you type in a number which is stored in the contacts, it'll show the name of the contact. But the name shouldn't delete the number, in case you want to continue editing. Also we should colour the button for opening the contacts, and once you start typing uncolour it.
No solid ideas yet. if you sketch something, don't forget call waiting, speaker, conference calls, volume control and etc.
vanous option to sms an active call contact should be included
piratebab When call is active, and phone in rather vertical position (usualy the position used when phoning), screen must be inactive and switched off (to avoid false action, and save battery) volume control: do you look at your screen when you phone ? For sure not. Volume control must be done by the AUX push button. First press, the volume slightly increase, next press it decreases, next press it increases ...). Using speaker is not possible today during phone call (have you tried it ?) There is too much echo (mike is close to the phone). The software solution is to switch off the mike when there is sound in the speaker (only One person can speak at the some time, but who cares ?)
Yprum In a phone with only a touchscreen and two buttons you have to use the screen when talking if you want to change anything. But when a call starts screen should be automatically locked and go blank, to unlock it, the normal AUX press, then you can change anything. I will try to make some sketch another day. But volume should be a bar. On top a button for turning on the speaker, on the bottom, a button to turn off the mic. In the bottom the options like waiting and show the keyboard and other stuff (important to have access to contacs, I've had to tell someone the number of other person so many times while in a call...). To hang the call, maybe a bar at the left of the volume, where you have to lift some button up, making it hard to hang by accident.
Jonci Right now there is some indicator missing, showing the duration of the call. Would be necessary e.g. for checking your costs. For the same reason it would be really nice if the active call screen could change to some 'closed call' screen showing the duration of the call, time, button to call back/again and stuff like that (so some specialized log just for the last call).
I'll explain a bit. In the window the option to hang off the phone or actually call again (the app I think souldn't close when a phone call is finished, and maybe stay there showing information, time spent...) is in the left, mark as a slider, if possible the phone could change colour depending on its position. Maybe the call waiting could be done setting this slider in the middle. Then we have a n ON/OFF switch for the speaker or to silence the mic, as well as a bar to select the volume, just like the one in Intone (amazing app indeed that one is). Then one button would show the keyboard, the options button will show other options if needed and the contacts button shows the contact app (I already explained why I want this here)
I think this could be quite ok and useful to use. Obviously the screen should be blocked as you have the actual conversation, this could be done with the Aux Button (to lock, but also unlock the screen). The lock-screen could be something like SHR-Today app, but instead of showing the hour, it shows the time you've been having the conversation.
I like opimd-utils error handling, maybe that's the way to go:
Some mockups are available at http://www.alasal.be/openmoko/shr2/ . Maybe we'll be able to reuse ideas/design.
- all.png (41.3 KB) - added by TAsn 6 years ago.
- incoming.png (45.2 KB) - added by TAsn 6 years ago.
- incoming-expanded.png (55.0 KB) - added by TAsn 6 years ago.
- contacts-popup.png (85.7 KB) - added by TAsn 6 years ago.
- contacts-hover.png (73.1 KB) - added by TAsn 6 years ago.
- contacts-search.png (78.8 KB) - added by TAsn 6 years ago.
- notifier-error.png (122.5 KB) - added by TAsn 6 years ago.
- notifier-hover.png (118.2 KB) - added by TAsn 6 years ago.
- notifier-message.png (120.4 KB) - added by TAsn 6 years ago.
- notifier-reply.png (118.3 KB) - added by TAsn 6 years ago.
- contact.jpg (139.6 KB) - added by TAsn 6 years ago.
- contacts.jpg (111.6 KB) - added by TAsn 6 years ago.
- notifier.jpg (119.8 KB) - added by TAsn 6 years ago.
- message.jpg (142.1 KB) - added by yprum 6 years ago.
- newmessage.jpg (52.9 KB) - added by yprum 6 years ago.
- incall.jpg (66.5 KB) - added by yprum 6 years ago.
(49.7 KB) -
added by fylefou 6 years ago.
a proposition of ui for contact selection
- contacts-sugestion-heinervdm.png (113.0 KB) - added by Heinervdm 5 years ago.
(139.2 KB) -
added by jesusmccloud 5 years ago.
(86.1 KB) -
added by jesusmccloud 5 years ago.
active call variant
(100.7 KB) -
added by jesusmccloud 5 years ago.
active call variant