Difference between revisions of "Addin Usability Guidelines"

From WikiPrizm
Jump to navigationJump to search
(It would be good if the images that are currently hosted on photobucket are uploaded to the wiki (or somewhere else on Cemetech) instead. I couldn't find an image upload option on the wiki.)
Line 1: Line 1:
 
== Icon Guidelines ==
 
== Icon Guidelines ==
 +
''Read the [http://www.cemetech.net/forum/viewtopic.php?t=6211 original discussion topic] on the Cemetech forum''
 +
 
Icons are a part of Prizm add-ins that are usually considered unimportant. They don't affect the add-in itself, but it's still a good idea to create a nice set of icons for your game/program. Users will see it even when they aren't playing your game/running your program, and if someone's add-in menu gets filled with icons that aren't user friendly, the add-in menu may become confusing. To make sure that your icons work well, there are a few things you should think about.
 
Icons are a part of Prizm add-ins that are usually considered unimportant. They don't affect the add-in itself, but it's still a good idea to create a nice set of icons for your game/program. Users will see it even when they aren't playing your game/running your program, and if someone's add-in menu gets filled with icons that aren't user friendly, the add-in menu may become confusing. To make sure that your icons work well, there are a few things you should think about.
  
Line 37: Line 39:
  
 
== Key Usage ==
 
== Key Usage ==
 +
''Read the [http://www.cemetech.net/forum/viewtopic.php?t=7468 original discussion topic] on the Cemetech forum''
 
* Menu: for exiting to the main menu ''only''. There are a few situations where the key does not function, such as optimizing storage memory or running the first-run setup.
 
* Menu: for exiting to the main menu ''only''. There are a few situations where the key does not function, such as optimizing storage memory or running the first-run setup.
 
* Exit: backs out of a window/operation, such as cancels editing a line, closing a MsgBox, ...
 
* Exit: backs out of a window/operation, such as cancels editing a line, closing a MsgBox, ...
 
* Quit: is used to return to an add-ins default view, except when inside of MsgBox's or system dialogs (which will instead act as [exit]).
 
* Quit: is used to return to an add-ins default view, except when inside of MsgBox's or system dialogs (which will instead act as [exit]).
 
* AC/on: is used to break from certain conditions and operations, such as program execution, clipping, and the catalog.
 
* AC/on: is used to break from certain conditions and operations, such as program execution, clipping, and the catalog.

Revision as of 10:45, 27 June 2012

Icon Guidelines

Read the original discussion topic on the Cemetech forum

Icons are a part of Prizm add-ins that are usually considered unimportant. They don't affect the add-in itself, but it's still a good idea to create a nice set of icons for your game/program. Users will see it even when they aren't playing your game/running your program, and if someone's add-in menu gets filled with icons that aren't user friendly, the add-in menu may become confusing. To make sure that your icons work well, there are a few things you should think about.

Style

The object that's the main focus of your icon shouldn't take up all of the 92x64 pixels that it has access to - it should generally be a bit smaller since the background also needs a bit of space (and the things that the Prizm OS will place on it, which we'll get to later). The official icons from Casio are somewhat colorful, somewhat 3D-looking, and they have shadows are slightly translucent. You can follow the style of these if you want to, or create your own kind of icon! 2D sprites work well if they aren't too similar to the backgrounds. If you do something that's different from how things are usually done, please check that it looks good and that things work well.

Example icons:

prizmicons.png

Selected/Unselected

In all add-ins, two icons must be provided - the selected icon, and the unselected icon. The two icons should show the same object(s) with different backgrounds - not two objects that are completely different from each other or the same object(s) with minor variations. There is one exception, though. When placing text in the icon (this is not recommended!), the text in the unselected icon should be white with a black outline and the text in the selected icon should be black with a white outline. Run-Matrix and Equation are examples of this. The unselected icon should have a pure black background, and the selected icon should have this background:

prizmempty.png

You can use a background that's similar to this one instead, but it's recommended that you use this one for consistency. If you're too lazy to create an actual icon, please use the background with nothing on top of it for the selected icon - don't make the selected icon pure black!

The Prizm OS

The Prizm OS is a bit quirky when it comes to icons. Our problem when creating icons (apart from the fact that we need two icons instead of one) is that some areas of it will be drawn on in the add-in menu. I have marked those areas in red here:

prizmguidelines.png

The square on the top right area of your icon will always be completely unseen, and you should never place anything that might be important there. However, it's recommended that you don't hide any flaws in there, since we don't know if the user is going to use something that isn't the Prizm OS to view the icons. The larger area on the bottom is where the name of your add-in will be placed. The main focus of your icon shouldn't be under it, but since it doesn't cover it completely, you can place things that aren't very important there. For example, a small part of the ruler in Conversion and Geometry is placed there, and an unimportant part of one of the images in the Picture Plot icon is also placed there. You should never place the name of your add-in in the icon since the OS does this for you.

For in-dev projects

If you have an in-dev project and do not have time to/are too lazy to make an icon, there is salvation!

KermMartian made these icons for in-dev projects:

Unselected

indev_u.png

Selected

indev_s.png

Key Usage

Read the original discussion topic on the Cemetech forum

  • Menu: for exiting to the main menu only. There are a few situations where the key does not function, such as optimizing storage memory or running the first-run setup.
  • Exit: backs out of a window/operation, such as cancels editing a line, closing a MsgBox, ...
  • Quit: is used to return to an add-ins default view, except when inside of MsgBox's or system dialogs (which will instead act as [exit]).
  • AC/on: is used to break from certain conditions and operations, such as program execution, clipping, and the catalog.