Difference between revisions of "GUI Prototyping"

From MPDLMediaWiki
Jump to navigation Jump to search
m
 
(80 intermediate revisions by 3 users not shown)
Line 2: Line 2:
<div style="float:left; width:70%; margin-bottom:3em;">
<div style="float:left; width:70%; margin-bottom:3em;">


=Introduction=


All interfaces coming up for the eSciDoc project are generated as static html pages:
=Prototypes for Publication Management (PubMan)=
 
[https://zim01.gwdg.de/repos/smc/trunk/04_Design/03_GUI_Design/03_Prototyping/HTML-Prototyp/13_Searching/index.html Example]
 
They do not contain any valid HTML, CSS or JS. Prototypes meet the following demand:
 
# Visualization and discussion of new approaches/ideas
# Technical evaluation
# Functional evaluation
# Usability evaluation
# Documentation
 
Prototypes are generated with Axure RP Pro. Please mind that Axure prototype files of current Releases can not be opened in older versions.
 
[[Media:Axure_Errors.doc|Issues in R5]]
 
=Abstract Prototype=
 
Abstract prototypes should reflect the main motivation, intentions of a certain user/user group and reflect a rough workflow, based on the motivation. the APT should visualize the user goals and the relevant information entities needed to reach the goal. The abstract prototype should not make any suggestions on the user interface or page flow, and should be media-independent, as much as possible.
Modeling an APT should help to focus on the user, his motivation/intention and his specific interests while acting. An APT is a visualization/cognitive tool to support further detailed use case specification and detailed functional prototypes.
 
=Definition of Functional Prototype=
 
Functional prototypes visualize all GUI elements, as precise as they appear after implementation:
 
# all necessary/important pages that appear to the user
# the page flow (Storyboard), where dynamic aspects can not be covered
 
=Structure of Prototypes=
 
The first page usually carries the name of the functional part. It shows a rough flow of important interface actions. The flow is not meant to rebuild the complete behaviour of the application. It shows:
 
*What actions are triggered: '''orange text'''
*What happens on the same page and what not: '''<page>'''
*When and on which pages messages appear: '''msg'''
 
Each other [https://zim01.gwdg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/HTML-Prototyp/13_Searching/index.html parent page] of the tree refers to a use case with the corresponding name. It carries the rough flow of the case to see which pages the user enters and leaves. [https://zim01.gwdg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/HTML-Prototyp/13_Searching/Advanced_Search.html Child pages] contain graphical interfaces.
 
On the bottom of pages you can find a general note about the page. Yellow note stickers contain specification text.
 
Specification attributes of interface elements or details:
 
#Label (Axure mandatory)
#Interactions (Axure mandatory)
#Specification
#ALT/Title Tag
#eSciDoc Component/Colors
 
These attributes are used to provide interface development and development a clear description of how the interface should look/work.
 
=PubMan Prototype=


<br/>
<br/>
{| style="background-color:#f9f9f9;" cellspacing="0" cellpadding="10"
{| style="background-color:#f9f9f9;" cellspacing="0" cellpadding="10"
|
|
|<b>Available Versions</b>
|<b>HTML Prototype</b>
|<b>Axure Source File</b>
|<b>Current Implementation</b>
|<b>Current Implementation</b>
|-
|-
|
|
|[https://zim01.gwdg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/HTML_Prototyp/12_Browsing_and_Displays/index.html R3 Prototype (Browsing & Display)]
|R1 No Prototyping
|R1 No Prototyping
|Finished
|-
|
|[https://subversion.mpdl.mpg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/HTML_Prototyp/12_Browsing_and_Displays/index.html R2 Prototype]
|[https://subversion.mpdl.mpg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/Prototype_PubMan.rp R2 RP File]
|Finished
|-
|
|[https://subversion.mpdl.mpg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/HTML_Prototyp/12_Browsing_and_Displays/index.html R3 Prototype (Browsing & Display)]
|[https://subversion.mpdl.mpg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/R3_Prototype_12_Browsing_and_Displays.rp R3 RP File]
|Finished
|Finished
|-
|-
|
|
|[https://zim01.gwdg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/HTML_Prototyp/R4%20Prototype/index.html R4 Prototype]
|[https://subversion.mpdl.mpg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/HTML_Prototyp/R4.1_Prototype/index.html R4 Prototype]
|[https://subversion.mpdl.mpg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/R4_PubMan_Prototype.rp R4 RP File]
|Finished  
|Finished  
|-
|-
|
|
|[https://zim01.gwdg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/HTML_Prototyp/R4.1_Prototype/index.html R4.1 Prototype]
|[https://subversion.mpdl.mpg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/HTML_Prototyp/R5_Prototype/index.html R5 Prototype]
|Finished  
|[https://subversion.mpdl.mpg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/R5_PubMan_Prototype.rp R5 RP File]
|Finished
|-
|
|[https://subversion.mpdl.mpg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/HTML_Prototyp/R6.1_Prototype/index.html R6.x Prototype]
|[https://subversion.mpdl.mpg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/R6.1_PubMan_Prototype.rp R6 RP File]
|[http://dev-pubman.mpdl.mpg.de/pubman/] [http://localhost:8080/pubman/]
|-
|}
<br/>
 
=Prototype for ViRR=
 
<br/>
{| style="background-color:#f9f9f9;" cellspacing="0" cellpadding="10"
|
|<b>HTML Prototype</b>
|<b>Axure Source File</b>
|<b>Current Implementation</b>
|-
|
|[https://subversion.mpdl.mpg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/HTML_Prototyp/VIRR_R1/index.html VIRR R1 Prototype]
|[https://subversion.mpdl.mpg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/Prototype_ViRR_R1.rp VIRR R1 RP File]
|Finished
|-
|
|[https://subversion.mpdl.mpg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/HTML_Prototyp/ViRR_R2.1/index.html VIRR R2.1 Prototype]
|[https://subversion.mpdl.mpg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/Prototype_ViRR_R2.1.rp R2.1 RP File]
|Finished
|-
|-
|
|
|[https://zim01.gwdg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/HTML_Prototyp/R5_Prototype/index.html R5 Prototype]
|[https://subversion.mpdl.mpg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/HTML_Prototyp/ViRR_R3/index.html VIRR R3.x Prototype]
|http://qa-pubman.mpdl.mpg.de:8080/pubman/
|[https://subversion.mpdl.mpg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/Prototype_ViRR_R3.rp R3 RP File]
|http://qa-virr.mpdl.mpg.de:8080/virr
|-
|-
|}
|}
<br/>
<br/>


=VIRR Prototype=
=Prototype for Digitization Lifecycle (German) =


<br/>
<br/>
{| style="background-color:#f9f9f9;" cellspacing="0" cellpadding="10"
{| style="background-color:#f9f9f9;" cellspacing="0" cellpadding="10"
|
|
|<b>Available Versions</b>
|<b>HTML Prototype</b>
|<b>Axure Source File</b>
|<b>Current Implementation</b>
|<b>Current Implementation</b>
|-
|-
|
|
|[https://zim01.gwdg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/HTML_Prototyp/VIRR_R1/index.html VIRR R1]
|[https://subversion.mpdl.mpg.de/repos/smc/tags/public/gui/dlc_R1.9.1/index.html DLC Prototype(1.9.1)]
|http://virr.mpdl.mpg.de/
|[https://subversion.mpdl.mpg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/Axure_Prototypes/Prototyp_DLC_R1.rp 1.9.1]
|In Development
|-
|-
|
|
|[https://zim01.gwdg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/HTML_Prototyp/ViRR_R2.1/index.html VIRR R2.1]
|
|http://test-virr.mpdl.mpg.de:8080/virr
|
|
|-
|
|
|
|
|-
|-
|}
|}
<br/>
<br/>


=FACES Prototype=
=Prototypes for Research- and Metadata Handling (FACES, Imeji)=


<br/>
<br/>
{| style="background-color:#f9f9f9;" cellspacing="0" cellpadding="10"
{| style="background-color:#f9f9f9;" cellspacing="0" cellpadding="10"
|
|
|<b>Available Versions</b>
|<b>HTML Prototype</b>
|<b>Axure Source File</b>
|<b>Current Implementation</b>
|<b>Current Implementation</b>
|-
|-
|
|
|[https://zim01.gwdg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/HTML_Prototyp/FACES_R1/index.html FACES R1]
|[https://subversion.mpdl.mpg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/HTML_Prototyp/FACES_R1/index.html FACES R1]
|[https://subversion.mpdl.mpg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/Prototype_Faces_R1.rp FACES R1 RP File]
|Finished
|-
|
|[https://subversion.mpdl.mpg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/HTML_Prototyp/FACES_R2/index.html FACES R2]
|[https://subversion.mpdl.mpg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/Prototype_Faces_R2.rp FACES R2  RP File]
|Finished
|-
|
|[https://subversion.mpdl.mpg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/HTML_Prototyp/FACES_R3/index.html FACES R3]
|[https://subversion.mpdl.mpg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/Prototype_Faces_R3.rp FACES R3 RP File]
|Finished
|-
|
|[https://subversion.mpdl.mpg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/HTML_Prototyp/FACES_R3.x/index.html FACES R3.x]
|[https://subversion.mpdl.mpg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/Prototype_Faces_R3.x.rp FACES R3.x RP File]
|Finished
|-
|
|
|[https://subversion.mpdl.mpg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/HTML_Prototyp/FACES_R4/index.html FACES R4]
|[https://subversion.mpdl.mpg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/Prototype_Faces_R4.rp FACES R4 RP File]
|http://qa-faces.mpdl.mpg.de/
|-
|-
|}
<br/>
{| style="background-color:#f9f9f9;" cellspacing="0" cellpadding="10"
|
|
|[https://zim01.gwdg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/HTML_Prototyp/FACES_R2/index.html FACES R2]
|<b>HTML Prototype</b>
| http://faces.mpdl.mpg.de (or http://faces.mpib-berlin.mpg.de/)
|<b>Axure Source File</b>
|<b>Current Implementation</b>
|-
|-
|
|
|[https://zim01.gwdg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/HTML_Prototyp/FACES_R3/index.html FACES R3]
|[https://subversion.mpdl.mpg.de/repos/smc/tags/public/gui/FACES_R4/index.html IMEJI Prototype]
|[https://subversion.mpdl.mpg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/Prototype_Faces_R4.rp IMEJI Prototype]
|http://dev-faces.mpdl.mpg.de/
|-
|}
<br/>
 
=Prototypes for Astronomer's Workbench=
 
 
{| style="background-color:#f9f9f9;" cellspacing="0" cellpadding="10"
|
|<b>HTML Prototype</b>
|<b>Axure Source File</b>
|<b>Current Implementation</b>
|-
|-
|
|
|[https://zim01.gwdg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/HTML_Prototyp/FACES_R3_5/index.html FACES R3.5]
|[https://subversion.mpdl.mpg.de/repos/awob/documentation/colab/mockups/Axure_Mockup/index.html AWOB Prototype]
|forthcoming
|http://awob.mpg.de:8081/en_GB/
|-
|-
|}
|}
Line 139: Line 182:
|}
|}
<br/>
<br/>
=Axure Files=
All axure files are versioned in SVN here:
* [https://zim01.gwdg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/R4_PubMan_Prototype.rp PubMan R4]
* [https://zim01.gwdg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/R5_PubMan_Prototype.rp PubMna R5]
* [https://zim01.gwdg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/Prototype_ViRR_R1.rp VIRR R1]
* [https://zim01.gwdg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/Prototype_ViRR_R2.1.rp VIRR R2.1]
* [https://zim01.gwdg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/Prototype_Faces_R1.rp FACES R1]
* [https://zim01.gwdg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/Prototype_Faces_R2.rp FACES R2]
* [https://zim01.gwdg.de/repos/smc/trunk/04_Design/03_GUI_Design/02_interface_conception_and_design/02_01_Prototyping/Prototype_Faces_R3.rp FACES R3]


</div>
</div>


[[Category:Interface Conception & Design| ]]
[[Category: User Interface Engineering]]
[[Category:eSciDoc|Prototyping]]

Latest revision as of 10:45, 25 April 2012


Prototypes for Publication Management (PubMan)[edit]


HTML Prototype Axure Source File Current Implementation
R1 No Prototyping R1 No Prototyping Finished
R2 Prototype R2 RP File Finished
R3 Prototype (Browsing & Display) R3 RP File Finished
R4 Prototype R4 RP File Finished
R5 Prototype R5 RP File Finished
R6.x Prototype R6 RP File [1] [2]


Prototype for ViRR[edit]


HTML Prototype Axure Source File Current Implementation
VIRR R1 Prototype VIRR R1 RP File Finished
VIRR R2.1 Prototype R2.1 RP File Finished
VIRR R3.x Prototype R3 RP File http://qa-virr.mpdl.mpg.de:8080/virr


Prototype for Digitization Lifecycle (German)[edit]


HTML Prototype Axure Source File Current Implementation
DLC Prototype(1.9.1) 1.9.1 In Development


Prototypes for Research- and Metadata Handling (FACES, Imeji)[edit]


HTML Prototype Axure Source File Current Implementation
FACES R1 FACES R1 RP File Finished
FACES R2 FACES R2 RP File Finished
FACES R3 FACES R3 RP File Finished
FACES R3.x FACES R3.x RP File Finished
FACES R4 FACES R4 RP File http://qa-faces.mpdl.mpg.de/



HTML Prototype Axure Source File Current Implementation
IMEJI Prototype IMEJI Prototype http://dev-faces.mpdl.mpg.de/


Prototypes for Astronomer's Workbench[edit]

HTML Prototype Axure Source File Current Implementation
AWOB Prototype forthcoming http://awob.mpg.de:8081/en_GB/


Pattern Library[edit]


Available Versions Current Implementation
Draft upcoming


Publication Management

Hypertext Markup Language

Virtueller Raum Reichsrecht

Retrieved from "https://colab.mpdl.mpg.de/mw010/index.php?title=GUI_Prototyping&oldid=78342"