The UDD-viewer lets you access all UDD-screens and corresponding documentation (description, design priciples and accessibility principles) in your browser.

A - UDD-Navigation

The black stripe on the top contains the navigation for the UDD-viewer.

From left:

• The close icon hides the info panel (B). Re-open with the menu-icon when closed.
• The language dropdown lets the user choose which language should be used in the UDD Viewer. In addition, there is a special "MOCK" language that is used by the development team to determine the maximum length of the various text fields. Shortcut SPACE+L.
• The "D01" dropdown lets you choose which UDD you want displayed in the main area (C). You can also open the dropdown with shortcut SPACE+U. Scroll or use the type-as-you-go filter for quick access. The type-as-you-go filter can be used to:
  • filter the list of available dialogues by name. Typing "D0" will remove all dialogues except those starting with a "D0".
  • filter the list by typing in one of the following tags: "password", "otp", "userid", "auth", "sign", "pay".
• The link-icon opens a full-screen version of the current UDD-screen in a new tab. This may be useful when displaying the screen on another device, such as a smartphone. Access the url on the device you want to test on.
• Options menu. (Primarily for developers)
  • Auto focus on/off. Sets the inputfield in focus (only on desktop).Disable this if you want to use keyboard to flip through UDD-screens (Alt-arrow up/down).
  • Notify focus on/off. Shows an info box at the bottom, containing information about the focused element.
  • Edit Password on/off. Sets the UDD in edit password-mode. Eks. Change password option in the UDDs menu will be disabled in this mode.
  • Challange R. (ms) – input field. Time to wait for challenge response to be retrieved (in ms.)
  • Password (ms) – input field. Time to wait for show password to be hidden (in ms.)
• On the top right there are options to change the UDD size with device defaults or type custom size and switch rotation.

B - Info panel

On the left side you will have description for the shown UDD. These are divided into 4 parts and contain general and UDD-specific information:

• Dialogue DescriptionUDD specific Information (similar to JAVA-UDD), Startup behavior, Operation details and Layout elements.
• Design principlesGeneral details on Client size, Responsive behavior, Animation, Colors, Icons, Fontsizes and Other sizes.
• Accessibility principlesGeneral details on WCAG 2.0 and Funka Nu guidelines, UU-Measures taken, Tab order and Reading order.
• Relevant documents
• Pull the handle on the middle-right to adjust the width of the panel.

C - Main content

Here you can see and use the displayed UDD, you are also able to resize the UDD using the handles below, right-bottom-corner and right to the client. The active size is reflected in the top right corner.

You can use PAGE UP/DOWN or ALT+ARROW UP/DOWN to browse to next or previous UDD in the list (Disable autofocus first).