phoenix workgroup consulting - geekmusthavegeekmusthave.com/wp-content/uploads/files/...phoenix...
TRANSCRIPT
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
11/23/2014 3Phoenix Workgroup Consulting
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
Phoenix Workgroup Consulting
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
11/23/2014 5Phoenix Workgroup Consulting
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
11/23/2014 6Phoenix Workgroup Consulting
Low Resolution
11/23/2014 7Phoenix Workgroup Consulting
High Resolution
11/23/2014 8Phoenix Workgroup Consulting
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
11/23/2014 9Phoenix Workgroup Consulting
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
11/23/2014 10Phoenix Workgroup Consulting
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:
Phoenix Workgroup Consulting
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
Phoenix Workgroup Consulting
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
Phoenix Workgroup Consulting
Library
11/23/2014 14
Templates (Master Pages)
Master (Web user control)
Assets (Images) Style Sheets (CSS)
Import
Phoenix Workgroup Consulting
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
11/23/2014 15Phoenix Workgroup Consulting
Work Buttons - Palette
11/23/2014 16Phoenix Workgroup Consulting
Work Buttons - Palette
11/23/2014 17
ContainersUsed for Pop-Up’s and user
controls
Phoenix Workgroup Consulting
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 18Phoenix Workgroup Consulting
Work Buttons - Palette
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
Phoenix Workgroup Consulting
Work Buttons - Palette
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
Work Buttons - Palette
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
Phoenix Workgroup Consulting
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
Phoenix Workgroup Consulting
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
11/23/2014 24Phoenix Workgroup Consulting
Questions & Notes
11/23/2014 25Phoenix Workgroup Consulting