Posts from "January, 2015"

How To … Adjust the Screen Size of your Prototypes

Today, most websites and apps need to work on various screen sizes, including those of smartphones and tablets. Responsive design is therefore one of the hot topics in UX. With Pidoco you can prototype for multiple devices – all in the same project. All you need to do is to set the desired screen size for your prototype pages. Here’s how to…

 

 1. Web prototypes

When creating a new web prototype, you will start out with a default page size of 960 x 1000 px. To adjust the page size open the page’s context menu (e.g. by clicking on the “Options” icon or by right-clicking on the page) and change the “Width” and/or “Height” values in the Properties tab. Pidoco will automatically remember these settings and apply them to new pages.

Page dimensions of prototypes are easily adjusted via the page's context menu

Page dimensions of prototypes are easily adjusted via the page’s context menu

Hint: Aside from using the breadcrumb navigation as shown above, you can also access a page’s context menu from several other places, including the Page View, Prototype View or the Screenflow View.

Adjust the page dimensions of web prototypes via the Page View and the breadcrumb navigation

Example of the page context menu as accessed from the Prototype View

 

 2. Mobile prototypes

Mobile prototypes come with a selection of common screen sizes, like smartphone (e.g. for iPhone or Android apps) or different tablet sizes, but of course you can set your own size. When adding a new page, you can select the desired screen size from the “New” dropdown in the toolbar. The default is 320 x 568 px (a smartphone screen in portrait mode). To adjust the page size simply open the page’s context menu and change the “Width” and/or “Height” values in the Properties tab.

Other available pre-defined screen sizes are:

  • 7″ tablets (600 x 800 px) in portrait and landscape formats
  • 10″ tablets (768 x 1228 px) in portrait and landscape formats

 

Adjust the page dimensions of mobile prototypes (via the Page View)

Mobile prototypes offer a range of pre-selected default page dimensions for various devices

 

That’s it! You have successfully resized your prototype pages!

Do you need help resizing your prototype pages? Just send us a message via support@pidoco.com or FacebookTwitter or Google+.

 

Happy Prototyping!

 

 

PS: If you are not sure which sizes are best to use, here is a quick overview on the commonly used dimensions of websites. Iteracy.com listed the page widths of widespread websites. For instance Facebook and LinkedIn have a fixed width of 980 px, whereas Bing comes along with 970 px and YouTube with 961 px. In terms of the height, 600 px marks an imaginary line from which on a visitor is likely to begin scrolling. According to w3schools.com and hobo-web.co.uk, optimizing your page for a resolution of 1024 x 768 px will guarantee a trouble-free scrolling for the majority of your visitors.

In terms of mobile devices, this is tricky as there are many different old and new devices out there. Here websitedimensions.com collected some useful information as you can see from the image, and mydevice.io presents a list of the physical and CSS values of various mobile devices, tablets and phablets.

However, when creating a new prototype, use page dimensions you expect most of the visitors to be using. In this case, it is recommended to do some research in advance.

How to … Edit Menus, Tables and More (Pidoco Syntax)

In Pidoco you can easily edit elements using a specific notation, which is actually similar to what is commonly referred to as the wiki syntax. You can find this notation in stencils like the TableMenu or Tree view as well as in the (un)ordered List. This post explains how to create and configure these elements. Here is how it goes …

 

1. In General

In Pidoco, stencils that contain textual content (e.g. menu, tree view, lists or even simple text) can be edited in order to alter that content and replace it with your content. To edit an element double-click on it and a simple text editor will open. But there’s more: When editing the content of certain elements in Pidoco, the Pidoco syntax allows you to tell Pidoco how you want the content to appear in your prototypes. For example, you can set formatting options by adding certain characters or symbols to an element’s content. The following conventions apply for all stencils that offer this option:

  • Adding entries: Each line in the text field represents one entry and starts out with a specific symbol, e.g. an asterisk (*) or a hash character (#).
  • Structuring entries: For stencils whose entries possess a hierarchical structure, the number of symbols marks the hierarchical level of the entry, e.g. one symbol stands for a top-level entry, two for a sub-level entry or three for a sub-sub-level entry etc. To add an entry, simply go to a new line and type your entry, preceeded by the appropriate number of symbols and a space.
  • Linking entries to a prototype page: Links are marked by brackets around the linked entry ([]) and the ID or URL of the link target immedialy following the opening bracket (Example: * [page0001 First Entry]). In this example, “page0001” is the page ID and “First Entry” the actual entry that will be visible in the prototype. Note: There’s no space between the opening bracket and the link target. Let’s assume you have already typed up the various entries of the stencil: To link an entry, highlight the entire entry you wish to link up and choose the target page from the dropdown menu shown in the text editor.
  • Linking entries to an external URL: The syntax is the same as for a link to a prototype page, but instead of the page ID, the external URL is written after the opening bracket.

 

2. Notation examples

a) Menu

In the Menu stencil each line represents one specific entry marked by one or more asterisks, depending on the level in the hierarchy. Only the top-level entries (one asterisk) are visible in the prototype, until the user opens the menu to display lower level entries. To add a new entry, go to the respective line, enter the asterisk(s) at the beginning, add a space character and type in the text of the entry, e. g. * Home. To link to a page within the prototype highlight the entire line and choose the desired target page from the drowdown of the text editor, for instance [page3243 Home]. To link up external content, paste the URL instead of the page ID, e.g. *** [https://pidoco.com/en/help/doc/stencil Stencil].

Notation specific for the menu stencil (incliuding internal and external links)

Notation specific for the menu stencil (including internal and external links)

Hint: Don’t forget the space character between the asterisk(s) and the opening bracket and between the page ID/external link and the name of the target page. If you cannot see all of menu entries in the menu, try to resize the stencil as it may require more space.

The formatted menu stencil (in the Simulation View)

The formatted menu stencil (in the Simulation View)

 

b) Table 

The Table stencil contains data structured in rows and columns. As usual, each row equals one line of text. The columns are marked by vertical lines | as a separator (also known as “pipes”). If you add a new row, remember that each row starts and ends with a vertical line that together represent the outer border of the table. To add a column, use the pipes and don’t forget to leave at least one empty space before and after each pipe, e.g. | Rank | Page | Impressions |. Each cell in the table therefore has an “opening pipe” and a “closing pipe”. Hint: Rows can have different numbers of cell entries, but the number of columns in the table is determined by the row with the highest number of cell entries.

You can also format the font style and alignment of the table entries. To display an entry in bold enclose the text with an asterisk (*), e.g. | *Rank* | *Page* | * Impressions* |. To align the text, enter one of the following letters directly following the opening pipe of a given cell without a space: c. to center the text, l. to align left or r. to align right.
Example: 
|c. 1 |l. Home |r. 1,333,000 |.

To link a cell entry to a page within the prototype, select the entry and choose the target page from the dropdown of the text editor, e.g. |r. [page3243 Home] |. To link to external content, insert the URL instead of a page ID.
Example: 
[https://pidoco.com/en/help/doc/stencil Stencil].

Notation specific for the table stencil (including formatinng)

Notation specific for the table stencil (including formatinng)

Hint: Don’t forget the space characters! Add one before and after each pipe. To leave a column blank, just put a space between two pipes (| |).

The formatted table stencil (in the Simulation View)

The formatted table stencil (in the Simulation View)

 

c) Unordered and Ordered List

In the List stencil each line represents one specific entry either marked by asterisks if you use a unordered list or by hash characters if you use an ordered list.

Notation specific for the ordered list stencil

Notation specific for the ordered list stencil

Hint: Don’t forget to add the space characters after the * or # !

The formatted ordered and unordered list stencil (in the Simulation View)

The formatted ordered and unordered list stencil (in the Simulation View)

 

d) Tree View

In the Tree View each line equals one category, sub- or even sub-sub-category. This hierarchy either starts with + or – , depending on whether a category is initially open (and can be collapsed, thus showing a – ) or closed (and can therefore be opened, thus showing a +). To add a new entry, go to the respective line and type in + or – at the beginning. Then add a space character and type in title of the entry, e. g. + Content. To link an entry to a page within the prototype, select the entire entry and choose the target page from the dropdown menu, e.g. – [page3243 Home]. Pasting a URL instead of a page ID will create a link to external content.
Example: 
++ [https://pidoco.com/en/help/doc/stencil Stencil].

Notation specific for the tree view stencil (incliuding internal and external links)

Notation specific for the tree view stencil (including internal and external links)

Hint: Don’t forget to add the space characters after the + or – !

The formatted tree view stencil (in the Simulation View)

The formatted tree view stencil (in the Simulation View)

 

That’s how easy it is to quickly turn menus and other stencils into interactive elements! Do you need help with the Pidoco syntax? Just send us a message via support@pidoco.com or
FacebookTwitter or Google+.

 

Happy Prototyping!