kickstart software development with user interface (ui ... software...kickstart software development...
TRANSCRIPT
![Page 1: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/1.jpg)
Kickstart Software Development with User Interface (UI) Prototypes
Presented by Matt Carmichael
![Page 2: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/2.jpg)
The Agile Manifesto
We are uncovering better ways of developing software by doing it and helping others do it.
Through this work we have come to value:
Individuals and interactions over processes and tools
Working software over comprehensive documentation Customer collaboration over contract negotiation
Responding to change over following a plan
http://www.agilemanifesto.org/
![Page 3: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/3.jpg)
Prerequisite of Agile
• Adopting Agile methodology assumes that the high-level vision and budget for a project have been decided.
• These fundamental decisions about scope and goals should be communicated to the team formed to build the product.
![Page 4: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/4.jpg)
What is Prototyping?
A prototype is a working model of a product, typically built for demonstration purposes.
![Page 5: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/5.jpg)
Rapid application development (RAD) Rapid application development (RAD) is an Agile
approach to software development which focuses on gathering requirements through building graphical user interfaces.
BAs continue to adjust requirements as knowledge is gained as the project progresses.
![Page 6: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/6.jpg)
Rapid application development (RAD)
![Page 7: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/7.jpg)
Defining Prototypes Classifications
Should the prototype be implemented as the final product or server as the requirement for the software build?
Not for Resell (NFR) Prototypes
vs Shippable Product
![Page 8: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/8.jpg)
Opinion • The focus of the Prototype should be the user interface and
experience. The working prototype should become the final requirement for the software build. Keep the prototype lightweight and portable. Build for reusability.
• Focus on: Colors, Layout, Navigation, Workflow, Content, Browser / Mobile Device Compatibility
• Avoid: Database connections, Infrastructure Implementation, Document Repositories, Security
![Page 9: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/9.jpg)
Benefits of Prototyping
![Page 10: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/10.jpg)
Risk Reduction
10
Through a Proof of Concept (POC) design, a prototype will:
• test feasibility of a design
• prevent the pursuit of complex or time consuming solutions
• identify problems earlier within the life-cycle
![Page 11: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/11.jpg)
Better Requirements
11
• Through continues demonstrations and building as a series of prototypes that evolve from minimal functionality to moderately useful to the final completed feature.
• Having users interact with evolving prototypes will provide BAs with useful and focused feedback.
![Page 12: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/12.jpg)
On Time and On Budget
12
• Focusing development of incremental units
(iterations) reduces chances for catastrophic failures.
• The project team focuses on features and functionality that provide the best value and return on investment (ROI).
![Page 13: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/13.jpg)
Kick Starting
13
A small skilled team with limited resources can quickly gather requirements and build a working prototype (within minutes).
![Page 14: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/14.jpg)
Disadvantages of Prototyping
![Page 15: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/15.jpg)
Resource Availability
15
• Requires time from business users, subject
matter experts, and business analysis, throughout the project life cycle. Requires
more interaction between users and
developers.
• Without business
commitment of
domain resources
throughout the life-
cycle, Rapid projects
will not succeed.
![Page 16: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/16.jpg)
Less Control
16
• Rapid is a very flexible adaptable process, allowing changes to be made quickly. This results in a trade-off between flexibility and control. Critical projects that value control over agility, Rapid is not a good fit.
![Page 17: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/17.jpg)
Poor Design
17
• Over focus on cosmetic and trivial features can cause functionality and critical components to be overlooked.
• Too many demonstrations can result in developers constantly making minor changes and ignoring system architecture issues
![Page 18: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/18.jpg)
Scalability Issue
18
• Rapid typically focuses on small to medium-sized project teams. Very large scale systems present unique challenges.
• Rapid can be difficult to follow once the initial software release is shipped. Many teams switch to scrum once release 1 is complete.
![Page 19: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/19.jpg)
Popular Agile process in use is Scrum
![Page 20: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/20.jpg)
Prototype Cycles
• Wireframes
• Graphic Design
• Prototype Tools - Clickable Images
• WOrking User Interface
![Page 21: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/21.jpg)
Wireframes
![Page 22: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/22.jpg)
Wireframes A visual guide that represents the skeletal framework of a user interface.
• Wireframes conceptualize an idea and communicate the ideas to a group
• Team member can review wireframes for design ideas
• Wireframes reduce the amount of time needed by extensive requirements or prototype development
![Page 23: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/23.jpg)
Wireframes
![Page 24: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/24.jpg)
Graphic Design
![Page 25: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/25.jpg)
Graphic Design • Wireframes are converted into images by
professional graphic designer
• Graphic Designer introduces several color pallets any page layouts
• Navigation options are designed
• Product Logo is designed or incorporated
![Page 26: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/26.jpg)
Graphic Design
• Divide graphic design into 2 cycles.
• 1 - Application landing page (logged in users).
• 2 – remaining wireframes
![Page 27: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/27.jpg)
Prototype Tool
![Page 28: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/28.jpg)
Prototype Tools Design, share, and test prototypes
Consolidate feedback from your team and stakeholders
Easily create and review iteration.
• Invision - www.invisionapp.com
• UXPin - www.uxpin.com
![Page 29: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/29.jpg)
User Interface
![Page 30: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/30.jpg)
Angular • Angular is a JavaScript framework that makes it
easy for developers to implement many interface features.
• Uses HTML5 / CSS3 / Bootstrap
• Fundamental building block for web and mobile frameworks
![Page 31: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/31.jpg)
Prototype Cycles
![Page 32: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/32.jpg)
Examples
![Page 33: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/33.jpg)
![Page 34: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/34.jpg)
User Interface
![Page 35: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/35.jpg)
![Page 36: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/36.jpg)
Invision Demo
https://invis.io/2NA6NGD3Z
![Page 37: Kickstart Software Development with User Interface (UI ... Software...Kickstart Software Development with User Interface (UI) Prototypes Presented by Matt Carmichael . The Agile Manifesto](https://reader030.vdocuments.mx/reader030/viewer/2022040906/5e7b28590bf49631fa686f76/html5/thumbnails/37.jpg)
Questions
A visual guide that represents the skeletal framework of a user interface.