Legacy Maemo 5 Documentation/Human Interface Guidelines/Dialogs - Revision history

imported_>amigadave: add link

2011-01-31T14:19:22Z

add link

← Older revision		Revision as of 14:19, 31 January 2011
Line 1:		Line 1:
	{{Legacy documentation}}		{{Legacy documentation}}

			{{main\|Legacy Maemo 5 Documentation/Graphical UI Tutorial/Windows and dialogs#Dialogs}}

	Although still created with a <code>GtkDialog</code>, Hildon dialogs are really different from the ones in a desktop environment. For a better usage, they are placed in the bottom of the screen and their buttons are placed on the right side. Dialogs can be closed by pressing the dimmed area that remains as the desktop background.		Although still created with a <code>GtkDialog</code>, Hildon dialogs are really different from the ones in a desktop environment. For a better usage, they are placed in the bottom of the screen and their buttons are placed on the right side. Dialogs can be closed by pressing the dimmed area that remains as the desktop background.

imported_>amigadave: /* Wizard Dialogs */ better wizard dialog image

2010-12-29T09:31:43Z

Wizard Dialogs: better wizard dialog image

← Older revision		Revision as of 09:31, 29 December 2010
Line 17:		Line 17:
	The first page of the wizard is a welcome page and its title is the wizard's name followed by "Welcome". Similarly, the title of the wizard's last page is the wizard's name combined with "Finished". The in-between pages' titles are a result of the combination of the wizard's name and that page's title in wizard's assigned notebook.		The first page of the wizard is a welcome page and its title is the wizard's name followed by "Welcome". Similarly, the title of the wizard's last page is the wizard's name combined with "Finished". The in-between pages' titles are a result of the combination of the wizard's name and that page's title in wizard's assigned notebook.

	[[Image:wizard.png\|frame\|center\|alt="Screenshot of a wizard dialog\|Figure 7: A wizard dialog]]		[[Image:Example wizard dialog.png\|frame\|center\|alt=Screenshot of a wizard dialog\|Figure 7: A wizard dialog]]

	Wizards contain three buttons - Finish, Previous and Next - which are dimmed or undimmed automatically according to the current page of the wizard.		Wizards contain three buttons - Finish, Previous and Next - which are dimmed or undimmed automatically according to the current page of the wizard.

imported_>amigadave: wikify slightly

2010-10-18T12:41:25Z

wikify slightly

← Older revision		Revision as of 12:41, 18 October 2010
Line 1:		Line 1:
	{{Legacy documentation}}		{{Legacy documentation}}

	~~=Dialogs=~~		Although still created with a <code>GtkDialog</code>, Hildon dialogs are really different from the ones in a desktop environment. For a better usage, they are placed in the bottom of the screen and their buttons are placed on the right side. Dialogs can be closed by pressing the dimmed area that remains as the desktop background.
	Although still created with a GtkDialog, Hildon dialogs are really different from the ones in a desktop environment. For a better usage, they are placed in the bottom of the screen and their buttons are placed on the right side. Dialogs can be closed by pressing the dimmed area that remains as the desktop background.

	Keep the number of dialog buttons low. Dialogs should not have a cancel button, that task is accomplished by pressing the dimmed area.		Keep the number of dialog buttons low. Dialogs should not have a cancel button, that task is accomplished by pressing the dimmed area.
Line 8:		Line 7:
	Dialogs should be used for small tasks, for example, asking for a category name when creating a new category in an email client application. In this example, there should be an entry for the user to enter the category name and a button "Create".		Dialogs should be used for small tasks, for example, asking for a category name when creating a new category in an email client application. In this example, there should be an entry for the user to enter the category name and a button "Create".

	[[Image:dialog.png\|~~400px]]~~		[[Image:dialog.png\|frame\|center\|alt=Screenshot of a dialog\|Figure 6: A dialog]]

	''Figure 6: A dialog''


	For bigger tasks like managing an email account folder like "Inbox" (browsing through the messages, deleting, editing them, and so on), use a view, not a simple dialog.		For bigger tasks like managing an email account folder like "Inbox" (browsing through the messages, deleting, editing them, and so on), use a view, not a simple dialog.

	==Wizard Dialogs==		==Wizard Dialogs==

	A wizard is a dialog that divides a certain task in sequential steps. With this special dialog, you can present a complex operation to the user in an easier and simpler way.		A wizard is a dialog that divides a certain task in sequential steps. With this special dialog, you can present a complex operation to the user in an easier and simpler way.

	The first page of the wizard is a welcome page and its title is the wizard's name followed by "Welcome". Similarly, the title of the wizard's last page is the wizard's name combined with "Finished". The in-between pages' titles are a result of the combination of the wizard's name and that page's title in wizard's assigned notebook.		The first page of the wizard is a welcome page and its title is the wizard's name followed by "Welcome". Similarly, the title of the wizard's last page is the wizard's name combined with "Finished". The in-between pages' titles are a result of the combination of the wizard's name and that page's title in wizard's assigned notebook.

			[[Image:wizard.png\|frame\|center\|alt="Screenshot of a wizard dialog\|Figure 7: A wizard dialog]]
	[[Image:wizard.png\|~~400px]]~~

	''Figure 7: An wizard dialog''


	Wizards contain three buttons - Finish, Previous and Next - which are dimmed or undimmed automatically according to the current page of the wizard.		Wizards contain three buttons - Finish, Previous and Next - which are dimmed or undimmed automatically according to the current page of the wizard.

imported_>amigadave: {{Legacy documentation}}

2010-02-12T09:26:49Z

← Older revision		Revision as of 09:26, 12 February 2010
Line 1:		Line 1:
			{{Legacy documentation}}

	=Dialogs=		=Dialogs=
	Although still created with a GtkDialog, Hildon dialogs are really different from the ones in a desktop environment. For a better usage, they are placed in the bottom of the screen and their buttons are placed on the right side. Dialogs can be closed by pressing the dimmed area that remains as the desktop background.		Although still created with a GtkDialog, Hildon dialogs are really different from the ones in a desktop environment. For a better usage, they are placed in the bottom of the screen and their buttons are placed on the right side. Dialogs can be closed by pressing the dimmed area that remains as the desktop background.
Line 12:		Line 14:

	For bigger tasks like managing an email account folder like "Inbox" (browsing through the messages, deleting, editing them, and so on), use a view, not a simple dialog.		For bigger tasks like managing an email account folder like "Inbox" (browsing through the messages, deleting, editing them, and so on), use a view, not a simple dialog.


	==Wizard Dialogs==		==Wizard Dialogs==

imported_>msoini: Documentation/Maemo 5 Developer Guide/Human Interface Guidelines/Dialogs moved to Legacy Maemo 5 Documentation/Human Interface Guidelines/Dialogs: Phase out from Maemo Developer Guide, superceded by Official Nokia Forum documentation

2009-10-14T09:07:36Z

Documentation/Maemo 5 Developer Guide/Human Interface Guidelines/Dialogs moved to Legacy Maemo 5 Documentation/Human Interface Guidelines/Dialogs: Phase out from Maemo Developer Guide, superceded by Official Nokia Forum documentation

← Older revision	Revision as of 09:07, 14 October 2009
(No difference)

imported_>liox_lang_valid: /* Dialogs */

2009-09-22T12:20:47Z

Dialogs

imported_>danielwilms at 11:04, 17 August 2009

2009-08-17T11:04:45Z

← Older revision		Revision as of 11:04, 17 August 2009
Line 1:		Line 1:
	=Dialogs=		=Dialogs=
	Although ~~derived from~~ GtkDialog, Hildon dialogs ~~behave differently~~ than in a ~~traditional~~ desktop environment. ~~To make them more usable~~, ~~dialogs~~ are placed at the bottom of the screen~~, with~~ their buttons on the right side. Dialogs can be closed by pressing on the dimmed desktop background ~~outside of the dialog itself~~.		Although still created with a GtkDialog, Hildon dialogs are really different than in a desktop environment. For a better usage, they are placed in the bottom of the screen and their buttons are place on the right side. Dialogs can be closed by pressing the dimmed area that remains as the desktop background.

	~~The~~ number of dialog buttons ~~should be kept to a minimum~~. Dialogs ~~should not~~ have a ~~"close" or "~~cancel" button, ~~since~~ that task is accomplished by pressing the dimmed area ~~outside of the dialog~~.		Keep the number of dialog buttons low. Dialogs shouldn't have a cancel button, that task is accomplished by pressing the dimmed area.

	Dialogs should be used for ~~quick~~ tasks~~. For~~ example, ~~a dialog is appropriate for~~ asking for a category name when creating a new category in an email application. In this example, there should be ~~a Text Entry Field~~ for ~~users~~ to enter the category name and a ~~single~~ button, "Create."		Dialogs should be used for small tasks, for example, asking for a category name when creating a new category in an email client application. In this example, there should be an entry for the user to enter the category name and a button "Create".

	[[Image:dialog.png\|400px]]		[[Image:dialog.png\|400px]]
Line 11:		Line 11:


	For ~~other~~ tasks ~~such as~~ browsing through ~~email~~ messages, deleting or editing them, ~~or managing an email account folder,~~ a ~~sub~~ view should be used ~~instead of~~ a dialog.		For bigger tasks like managing an email account folder like "Inbox" (browsing through the messages, deleting, editing them, etc.) a view should be used, not a simple dialog.


	==Wizard Dialogs==		==Wizard Dialogs==
	A ~~Wizard~~ is a dialog that divides a task ~~into~~ sequential steps. With this special~~-case~~ dialog, a complex operation can be presented ~~more simply~~ to ~~users~~. ~~Therefore, do not use~~ a ~~Wizard unless you are sure it will simplify an action for~~ the ~~user~~. ~~For example~~, in a ~~situation where users must set a simple preference, a normal dialog should be enough~~. ~~But, if users must complete~~ a ~~number~~ of ~~settings which are dependent on sequential input before~~ the ~~application will function properly, then~~ the ~~use of a Wizard is appropriate~~.		A wizard is a dialog that divides a certain task in sequential steps. With this special dialog, a complex operation can be presented to the user in an easier and simpler way.

			The first page of the wizard is a welcome page and its title is the wizard's name followed by "Welcome". Analogously, the title of the wizard's last page is a the wizard's name combined with "Finished". The in-between pages' titles are a result of the combination of the wizard's name and that page's title in wizard's assigned notebook.

	The first page of a Wizard is a "welcome page." Its title should be the Wizard's name followed by, "Welcome." Similarly, the title of the Wizard's last page is a the Wizard's name combined with, "Finished." The titles of intermediate pages should be a combination of the Wizard's name and the action to be completed on the page. The page's action is set in the Wizard's assigned Notebook.

	[[Image:wizard.png\|400px]]		[[Image:wizard.png\|400px]]
Line 24:		Line 25:


	~~Wizard dialogs~~ contain three buttons: Finish, Previous, and Next~~. These buttons~~ are ~~automatically~~ dimmed or undimmed according to the current page of the ~~Wizard~~.		Wizards contain three buttons - Finish, Previous and Next - which are dimmed/undimmed automatically according to the current page of the wizard.

			Since the first page is the welcome page, it should not have widgets that require user input (apart from the buttons) but instead tell the user what the wizard is there for. That information should suggest what to expect from the wizard's steps as well as what will happen once the wizard finishes. The last page should resume important choices made by the user along the pages and recall what will happen once he or she press the "Finish" button. Widgets that express important choices should not be added to the last page although simple choices ones, like showing a README file, can be added. The in-between pages are the ones where the should be asked to enter information or choose important/main choices. For these pages, explain by providing labels and captions what each requested information or choice is about.

	~~Since the first page~~ is the ~~welcome page~~, it ~~should not require any~~ user ~~input~~, ~~other than navigation buttons. Instead~~ the ~~page should tell~~ the user ~~what the Wizard is for. This information~~ should ~~describe what to expect from the Wizard~~, the ~~steps that will follow~~, ~~as well as what will happen once the Wizard is complete. The last page should summarise important choices made by~~ the user ~~as well as describe what will happen when the "Finish" button~~ is ~~pressed. Avoid asking for important choices on the last page~~ of a ~~Wizard (although simple choices~~, ~~such as showing~~ a ~~README file, may be included). All important choices to be made, including data that users are required to enter,~~ should be ~~requested on the intermediate pages of the Wizard. Likewise, always explain (via labels and captions) the reason for the requested information or choices~~.		Remember, a wizard is supposed to make a task simpler, not the opposite. Hence, you shouldn't use it unless you're sure you will simplify things for the user. For example, if the task is just to present a couple of information and checkboxes for the user to set some preferences, a normal dialog should be used, not a wizard. On the other hand, the user is requested to set a number of settings dependent from each other in a sequential way, a wizard should be used.

imported_>bijjal: New page: =Dialogs= Although derived from GtkDialog, Hildon dialogs behave differently than in a traditional desktop environment. To make them more usable, dialogs are placed at the bottom of the sc...

2009-07-13T19:43:09Z

New page: =Dialogs= Although derived from GtkDialog, Hildon dialogs behave differently than in a traditional desktop environment. To make them more usable, dialogs are placed at the bottom of the sc...

New page

=Dialogs=
Although derived from GtkDialog, Hildon dialogs behave differently than in a traditional desktop environment. To make them more usable, dialogs are placed at the bottom of the screen, with their buttons on the right side. Dialogs can be closed by pressing on the dimmed desktop background outside of the dialog itself.

The number of dialog buttons should be kept to a minimum. Dialogs should not have a "close" or "cancel" button, since that task is accomplished by pressing the dimmed area outside of the dialog.

Dialogs should be used for quick tasks. For example, a dialog is appropriate for asking for a category name when creating a new category in an email application. In this example, there should be a Text Entry Field for users to enter the category name and a single button, "Create."

[[Image:dialog.png|400px]]

''Figure 6: A dialog''

For other tasks such as browsing through email messages, deleting or editing them, or managing an email account folder, a sub view should be used instead of a dialog.

==Wizard Dialogs==
A Wizard is a dialog that divides a task into sequential steps. With this special-case dialog, a complex operation can be presented more simply to users. Therefore, do not use a Wizard unless you are sure it will simplify an action for the user. For example, in a situation where users must set a simple preference, a normal dialog should be enough. But, if users must complete a number of settings which are dependent on sequential input before the application will function properly, then the use of a Wizard is appropriate.

The first page of a Wizard is a "welcome page." Its title should be the Wizard's name followed by, "Welcome." Similarly, the title of the Wizard's last page is a the Wizard's name combined with, "Finished." The titles of intermediate pages should be a combination of the Wizard's name and the action to be completed on the page. The page's action is set in the Wizard's assigned Notebook.

[[Image:wizard.png|400px]]

''Figure 7: An wizard dialog''

Wizard dialogs contain three buttons: Finish, Previous, and Next. These buttons are automatically dimmed or undimmed according to the current page of the Wizard.

Since the first page is the welcome page, it should not require any user input, other than navigation buttons. Instead the page should tell the user what the Wizard is for. This information should describe what to expect from the Wizard, the steps that will follow, as well as what will happen once the Wizard is complete. The last page should summarise important choices made by the user as well as describe what will happen when the "Finish" button is pressed. Avoid asking for important choices on the last page of a Wizard (although simple choices, such as showing a README file, may be included). All important choices to be made, including data that users are required to enter, should be requested on the intermediate pages of the Wizard. Likewise, always explain (via labels and captions) the reason for the requested information or choices.

← Older revision		Revision as of 12:20, 22 September 2009
Line 1:		Line 1:
	=Dialogs=		=Dialogs=
	Although still created with a GtkDialog, Hildon dialogs are really different ~~than~~ in a desktop environment. For a better usage, they are placed in the bottom of the screen and their buttons are ~~place~~ on the right side. Dialogs can be closed by pressing the dimmed area that remains as the desktop background.		Although still created with a GtkDialog, Hildon dialogs are really different from the ones in a desktop environment. For a better usage, they are placed in the bottom of the screen and their buttons are placed on the right side. Dialogs can be closed by pressing the dimmed area that remains as the desktop background.

	Keep the number of dialog buttons low. Dialogs ~~shouldn't~~ have a cancel button, that task is accomplished by pressing the dimmed area.		Keep the number of dialog buttons low. Dialogs should not have a cancel button, that task is accomplished by pressing the dimmed area.

	Dialogs should be used for small tasks, for example, asking for a category name when creating a new category in an email client application. In this example, there should be an entry for the user to enter the category name and a button "Create".		Dialogs should be used for small tasks, for example, asking for a category name when creating a new category in an email client application. In this example, there should be an entry for the user to enter the category name and a button "Create".
Line 11:		Line 11:


	For bigger tasks like managing an email account folder like "Inbox" (browsing through the messages, deleting, editing them, ~~etc.~~) a view ~~should be used~~, not a simple dialog.		For bigger tasks like managing an email account folder like "Inbox" (browsing through the messages, deleting, editing them, and so on), use a view, not a simple dialog.


	==Wizard Dialogs==		==Wizard Dialogs==
	A wizard is a dialog that divides a certain task in sequential steps. With this special dialog, a complex operation ~~can be presented~~ to the user in an easier and simpler way.		A wizard is a dialog that divides a certain task in sequential steps. With this special dialog, you can present a complex operation to the user in an easier and simpler way.

	The first page of the wizard is a welcome page and its title is the wizard's name followed by "Welcome". ~~Analogously~~, the title of the wizard's last page is a the wizard's name combined with "Finished". The in-between pages' titles are a result of the combination of the wizard's name and that page's title in wizard's assigned notebook.		The first page of the wizard is a welcome page and its title is the wizard's name followed by "Welcome". Similarly, the title of the wizard's last page is the wizard's name combined with "Finished". The in-between pages' titles are a result of the combination of the wizard's name and that page's title in wizard's assigned notebook.


Line 25:		Line 25:


	Wizards contain three buttons - Finish, Previous and Next - which are dimmed/undimmed automatically according to the current page of the wizard.		Wizards contain three buttons - Finish, Previous and Next - which are dimmed or undimmed automatically according to the current page of the wizard.

	~~Since~~ the first page is the welcome page, it should not have widgets that require user input (apart from the buttons) but instead tell the user what the wizard is there for. That information ~~should~~ suggest what to expect from the wizard's steps as well as what will happen ~~once~~ the wizard finishes. The last page ~~should~~ resume important choices made by the ~~user~~ along the pages and recall what will happen ~~once he or she~~ press the "Finish" button. Widgets that express important choices ~~should~~ not be added to the last page although simple choices ~~ones~~, like showing a README file, can be added. The in-between pages are the ones where ~~the~~ should be asked to enter information or choose important/main choices. For these pages, explain by providing labels and captions what each requested information or choice is about.		Because the first page is the welcome page, it should not have widgets that require user input (apart from the buttons) but instead tell the user what the wizard is there for. That information must suggest what to expect from the wizard's steps as well as what will happen when the wizard finishes. The last page must resume important choices made by the users along the pages and recall what will happen when they press the "Finish" button. Widgets that express important choices must not be added to the last page although simple choices, like showing a README file, can be added. The in-between pages are the ones where users should be asked to enter information or choose important/main choices. For these pages, explain by providing labels and captions what each requested information or choice is about.

	Remember, a wizard is supposed to make a task simpler, not the opposite. Hence, you ~~shouldn't~~ use it unless you~~'re~~ sure you will simplify things for the user. For example, if the task is just to present a couple of ~~information and~~ checkboxes for the user to set some preferences, a normal dialog ~~should be used~~, not a wizard. On the other hand, the user is requested to set a number of settings dependent ~~from~~ each other in a sequential way, a wizard ~~should be used~~.		Remember, a wizard is supposed to make a task simpler, not the opposite. Hence, you should not use it unless you are sure you will simplify things for the user. For example, if the task is just to present some information and a couple of checkboxes for the user to set some preferences, use a normal dialog, not a wizard. On the other hand, if the user is requested to set a number of settings dependent on each other in a sequential way, use a wizard.