Phoenix Workgroup Consulting
Total Page:16
File Type:pdf, Size:1020Kb
Phoenix Workgroup Consulting Protoshare Training Part 1 – Introduction May 2014 John HR Schuster Version 2.1c 11/23/2014 Phoenix Workgroup Consulting 1 Prototyping / Wireframe Toolkits 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 11/23/2014 Phoenix Workgroup Consulting 2 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 link http://pwc.protoshare.com/launch/static/account-getting-started.html 11/23/2014 Phoenix Workgroup Consulting 3 Two sides of Coin • Active pages that allow for kicking the tires • Navigation links that work D S • Designer annotations to shareholders • User discussions to resolve issues e h • Any level of resolution possible • a Documentation geared towards users v r e e l o h Designer / p o Architect l e d r • Active pages that allow basic layout and UI s e • Navigation links that indicate work flow • Designer annotations to developers r • User discussions identify critical points • Specific Technical documentation page s • Documentation geared towards developers 11/23/2014 Phoenix Workgroup Consulting 4 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 Phoenix Workgroup Consulting 5 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 Phoenix Workgroup Consulting 6 Low Resolution 11/23/2014 Phoenix Workgroup Consulting 7 High Resolution 11/23/2014 Phoenix Workgroup Consulting 8 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 Phoenix Workgroup Consulting 9 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 Phoenix Workgroup Consulting 10 Opening curtain Library Tab Templates Masters Assets Page(s) Tab Work Buttons Work in Web progress for components this project Properties Actions Pages area Some pages are siblings. Some pages are Question: What is the current page we are working on? hidden. Answer: 11/23/2014 Phoenix Workgroup Consulting 11 Edit Visibility Pages Area Where can page be seen? Edit Doco HTML Page Right Click behind the Page web page Properties New Sub-page Page at same level as this page New Sibling Page at level below this page Export Compile Host PDF, DOC, ZIP 11/23/2014 Phoenix Workgroup Consulting 12 Export Export Name Be clever ZIP File Full version of export Publish To Protoshare websites Publish To Word or Adobe PDF Discussions You should check this 11/23/2014 Phoenix Workgroup Consulting 13 Library Templates (Master Pages) Assets (Images) Style Sheets (CSS) Master (Web user control) Import 11/23/2014 Phoenix Workgroup Consulting 14 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 Phoenix Workgroup Consulting 15 Work Buttons - Palette 11/23/2014 Phoenix Workgroup Consulting 16 Work Buttons - Palette Containers Used for Pop- Up’s and user controls 11/23/2014 Phoenix Workgroup Consulting 17 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 Phoenix Workgroup Consulting 18 Work Buttons - Palette Control Which type of control Stroke Outside of control, Visibility borders When can you see control Fill Inside of Actions control What happens when you do something to control Box Additional border 11/23/2014 Phoenix Workgroup Consulting 19 Work Buttons - Palette Text Color Name Default is light Let project grey name things itself. Change when clarity is needed CSS File Project has it’s own, you can change it Z Layer Control what lays over what 11/23/2014 Phoenix Workgroup Consulting 20 Work Buttons - Palette 11/23/2014 Phoenix Workgroup Consulting 21 Work Buttons - Sidebar Controls Annotations Rearrange Click and drag Template States States View or Set them for testing 11/23/2014 Phoenix Workgroup Consulting 22 Miscellaneous Controls Test (T) Annotations Hot Spot Allows test of Click to add Draw a hot a page in new spot region on design annotations the page Review See prototype like Reviewer will set it URL Get web link for Live Prototype for this page Snapshot Appearance Get snapshot Adjust how of page just as select control it is appears 11/23/2014 Phoenix Workgroup Consulting 23 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 Phoenix Workgroup Consulting 24 Questions & Notes 11/23/2014 Phoenix Workgroup Consulting 25.