phoenix workgroup consulting - geekmusthavegeekmusthave.com/wp-content/uploads/files/...phoenix...

Phoenix WorkgroupConsulting

Protoshare TrainingPart 1 – Introduction

May 2014John HR Schuster

Version 2.1c

11/23/2014 1Phoenix Workgroup Consulting

Prototyping / Wireframe Toolkits

11/23/2014 2

Considerations• Web based (Not Windows)can be used from any platform (Cloud storage)• Interactive and dynamic prototype that runs like a web app• Any level of resolution including mobile• High level of collaboration for everyone• Inexpensive entry cost and maintenance

Phoenix Workgroup Consulting

Protoshare Introduction• ProtoShare is an easy-to-use, collaborative prototyping

tool that helps teams visualize requirements with website wireframes and interactive prototypes while working together in real-time.

• Teams include– Customer and shareholders– Architects and designers– Business analysts and trainers

• Protoshare has 2 types of users– Developer (2) Can create and edit projects– Reviewers (Unlimited) Who can review and comment

• Resource linkhttp://pwc.protoshare.com/launch/static/account-getting-started.html


Two sides of Coin

11/23/2014 4

• Active pages that allow for kicking the tires• Navigation links that work• Designer annotations to shareholders• User discussions to resolve issues• Any level of resolution possible• Documentation geared towards users

Shareholders

• Active pages that allow basic layout and UI• Navigation links that indicate work flow• Designer annotations to developers• User discussions identify critical points• Specific Technical documentation page• Documentation geared towards developers

Developers

Designer /Architect


Protoshare features• Drag and drop design tool• Templates – Master Pages• Masters – User Web Content• Assets – Images, pictures, etc• Cut and Paste from other projects• Live prototypes – Users access actual prototype on-line• Published prototype – Users access

compiled prototype on-line with annotations• Distributed prototype – Users get ZIP with prototype

on it, can be unzipped anywhere• Document Prototype – User access

PDF/DOC version of prototype with annotations• Screen Capture any page


Protoshare Features

• Live and Published prototypes behave just like a web site

• High or low resolutions allowed• Navigation, form fill in, scrolling, navigation

helping shareholders with look and feel• Annotations are notes from the designer to both

the shareholders and developers• Discussions are messages or questions from

anyone to everyone about design or UI/UX• Documentation section for every page can hold

the technical details of the design


Low Resolution


High Resolution


Presentation Methods• Interactive web based prototype discussion

– Shareholders push “Pins” into prototype with questions– Designer responds to questions– All reviewers get to see all discussions– Entire discussion can be included in documentation– Resolve issues as quick as users do the reviews– Very difficult to get shareholders to go interactive

• Interactive JAD session review– Designer leads shareholders through screens– Business analyst records notes and update requests– Designer make changes to prototype for next session– All Versions of prototype available from web site (Cloud)– Produce “Word” document of the pages being reviewed with screen

shots, designer annotations and user discussions


Getting Started• Protoshare is Software As A Service (SaaS)• You only need a (Real) browser

– Not IE8, IE9, IE10, IE11– Firefox– Chrome (May be problematic)

• URL: Pwc.protoshare.com• User ID:• Password: • Each student will get a training area project named by the students

first name(Remember to change to your project)

• Each Student will get access to a number of other projects for reference and Copy and Paste(Do not change these projects)

• During training we will be using the (Measures) project as our Target


Opening curtain

11/23/2014 11

Pages areaSome pages are

siblings.Some pages are

hidden.

Library TabTemplates

MastersAssets

Work ButtonsWeb

componentsProperties

Actions

Page(s) TabWork in

progress for this project

Question: What is the current page we are working on?Answer:


Pages Area

11/23/2014 12

Right ClickPage

Properties

Edit VisibilityWhere can

page be seen?

Edit DocoHTML Page behind the web page

New Sub-pagePage at same level as this

page

New SiblingPage at level

below this page

ExportCompile

HostPDF, DOC, ZIP


Export

11/23/2014 13

Export NameBe clever

ZIP FileFull version of

export

PublishTo Protoshare

websites

PublishTo Word or Adobe PDF

DiscussionsYou should check this


Library

11/23/2014 14

Templates (Master Pages)

Master (Web user control)

Assets (Images) Style Sheets (CSS)

Import


Show and Tell

• Open up various pages, show tabs for pages• Explain Sub pages and Sibling pages• Show most common trap of

pages panel and page tabs• Open Library show Templates• Open Library show Masters• Open library show Assets• Create a new template using Assets• Show how to import objects

from other projects


Work Buttons - Palette



11/23/2014 17

ContainersUsed for Pop-Up’s and user

controls


Show and Tell

• Crate a new page in Measures• Rename it Training Page• Hide it from Navigation• Add 1 of each popular control to the page• Add a Page name control to the page• Make page look like a real page• Add annotations to the page• Export the page and view hosted version



11/23/2014 19

ControlWhich type of

control

VisibilityWhen can you

see control

ActionsWhat happens when you do something to

control

StrokeOutside of

control, borders

FillInside of control

BoxAdditional

border



11/23/2014

Z LayerControl what

lays over what

Text ColorDefault is light

grey

CSS FileProject has it’s own, you can

change it

NameLet project

name things itself. Change when clarity

is needed

Phoenix Workgroup Consulting 20


11/23/2014 Phoenix Workgroup Consulting 21

Work Buttons - Sidebar

11/23/2014 22

Controls

States

Annotations

Template

RearrangeClick and drag

StatesView or Set

them for testing


Miscellaneous Controls

11/23/2014 23

Test (T)Allows test of

a page in design

AnnotationsClick to add

new annotations

Hot SpotDraw a hot

spot region on the page

ReviewSee prototype like Reviewer

will set it

URLGet web link

for Live Prototype for

this page

SnapshotGet snapshot of page just as

it is

AppearanceAdjust how

select control appears


Show and Tell• Change some of the properties of

each of the controls on the training page• Use the appearance bar for the text control• Show how to change a text control

into an RTF control• Rearrange the controls on the page• Add a container control and

add controls inside of it. • Show how menu control is dynamic• Test the page, Run the page• Get a URL for page• Get an image for the page


Questions & Notes


phoenix workgroup consulting - geekmusthavegeekmusthave.com/wp-content/uploads/files/...phoenix...

Documents