Training Webinar - Designing for OutSystems Applications
•
5 j'aime•1,548 vues
João Guerra is a Designer. Capital "D" kind of designer. That's because he understands and feels the pains of his fellow designers when they are designing for developers. But he also understands the pains developers have in translating a designer's visions. So, João is here to help. We heard you, and we want to make the lives of people with different mindsets a lot easier. João will go through his personal story, from being a designer used to create for B2C, to one that's much more focused on the B2E market, and the challenges he had to embrace in his path. And then he will tell you all about how a framework helps and how it enables him to iterate much more quickly with his developer counterparts. In this session you will: - Understand the importance of Design in Enterprise Apps. - Figure out how UX and UI develop a vision and collaborate to create a concept. - Learn how designers and developers can work together, as a team. - Discover the methods and tools that can lead to better collaborations. - How to customize designs - Style Guides, building pages with pre-built patterns and how to adapt to specific use cases. Free Online training: https://www.outsystems.com/learn/courses/ Follow us on Twitter http://www.twitter.com/OutSystemsDev Like us on Facebook http://www.Facebook.com/OutSystemsDev
Recommandé
Recommandé
Contenu connexe
Plus de OutSystems
Plus de OutSystems (20)
Dernier
Dernier (20)
Training Webinar - Designing for OutSystems Applications
- 1. Designing for OutSystems Applications
- 2. João Guerra User Interface Design Expert @ OutSystems linkedin.com/in/joaofilipeguerra
- 4. Silk UI A Designer’s guide: How to collaborate with developers
- 5. Agenda ● From Business to Consumer (B2C) to Business to Employee (B2E) ● Importance of Design in Enterprise Apps ● UX and UI develop a vision and collaborate to create a concept ● Designers and developers working together, as a team ● Methods and tools that lead to better collaborations ● Design creation: ○ How to create Style Guides ○ Building pages with pre-built patterns - Silk U ○ How to extend Silk UI patterns to specific use cases
- 6. What I learned going from B2C to B2E
- 7. B2C “business model whereby a company sells its products directly to consumers Business to Consumer www.investopedia.com/video/play/businesstoconsumer/
- 9. www.investopedia.com/video/play/businesstoconsumer/ B2E “B2E is business-to-employee, an approach in which the focus of business is the employee, rather than the consumer Business to Employee
- 11. Lower Span of Attention Higher Focus B2C B2E#2 Vs
- 12. http://www.apple.com/hotnews/apple-answers-fcc-questions/ “Apple’s goal is to provide our customers with the best possible user experience Apple standards
- 13. http://www.statista.com/statistics/263794/number-of-downloads-from-the-apple-app-store “As of June 2016, there were more than 130 billion app downloads from the Apple App Store, for the various iOS devices. Apps downloads Statista
- 14. B2C B2E#3 Vs
- 15. Importance of design in B2E Higher Expectations Frequency of use Increase on efficiency
- 16. Investment on design for B2E
- 18. This iceberg is your project
- 19. The designer is working on the tip of the iceberg
- 20. The designer is working on the tip of the iceberg He must prepare the remaining work However
- 21. Because it’s under the water that developers are usually left alone for the rest of the project
- 22. How can designers help developers work on these deeper parts of the iceberg?
- 23. Tips for a better collaboration
- 26. The problem! Where Design fits
- 27. Where Design fits… in Agile! Agile Process
- 29. “ We’re not designing pages, we’re designing systems of components Stephen Hay http://bradfrost.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/
- 30. Accelerate the process Ensure consistency Shared vocabulary Of development and design Critical for usability as for project maintainability Between project members, from old ones to newcomers
- 31. Perfectly fit to the platform Good development experience Codeless UI framework +
- 32. goo.gl/bP0x2F goo.gl/AZfPP8 Samuel Jesus
- 33. How does our workflow fit this mindset?
- 34. UX UI FEUI DEV
- 35. goo.gl/IZFUMP goo.gl/NsIsq7 Ricardo Luiz
- 37. Base elements UI
- 41. Base elements Key screens Specific use cases UI
- 42. Base elements Key screens Specific use cases Style Guide UI UI kit available on Dribbble
- 43. The combination of Wireframes Key Screens Style Guide will give guidance for the rest of the project UI DEV
- 44. Heading 1 Buttons Heading 2 UI DEV Forms
- 45. goo.gl/Btttuj goo.gl/wJNcmL Daniel Reis
- 48. 4 8 Leave notes and get feedback
- 51. Screenshot to Lisbon shot em modal goo.gl/Rcr5PI
- 52. goo.gl/ZaXv9w
- 53. goo.gl/mh5ZnA
- 54. To conclude
- 55. Final Takeaways Approach, process and handover method can have a great outcome and impact in your work #1 Silk UI is a great accelerator for your work and iterations#2 Reusable and consistent design vision is life changing for your project #3
- 56. Thank you!
Notes de l'éditeur
- Greetings to you all! And thank you for attending this Webinar regarding the Design process for OutSystems applications.
- My name is João Guerra, and I am a User Interface Designer, working with OutSystems for around two years, now.
- How did this subject come up? I don’t know if you’re aware of this, but we had a great Developers Morning last May, just before our main event — NextStep 2016 —, in which we announced a REVOLUTION. During this Developers Morning we had a couple of AMA (Ask Me Anything) sessions with some of our most active community members and developers. In these sessions, we listened to what were some of your most pressing concerns.
- In these sessions, our framework for creating beautiful designs with the least possible effort — Silk UI — was mentioned a few times. While developers showed how impressed they were with Silk UI, one of the questions they raised was whether they were using it correctly and enabling designers at the same time. We know that sometimes the process isn’t simple, but the developer-designer interaction could be done in a more efficient way. When you have a tool as powerful, yet easy to use, as Silk UI, we believe we can help you there.
- So, our agenda for today includes the following topics: First of all, I’m going to talk a little bit about my transition as a designer from designing for B2C to mainly focusing on B2E apps. Then Why is Design important in Enterprise Apps? There are high expectations to meet and a good design can increase intuitiveness which facilitates user adoption. After that, we go a little deeper into our process. That was actually the subject of a webinar my colleague Ricardo Luiz presented a few weeks ago, but I’m just going to summarise some of the things he mentioned there to give some extra context. If you have the chance, you should also watch his session. We’ll leave you a link for it, later. Now, how do you go from this concept to a design on which developers will… do their thing? (image of a developer furiously typing) We’re gonna give you a few tips on this and then we’ll present you the tools and methods we believe can lead to better collaborations. I will show you how you can customize designs, by using Style Guides and also how to create amazing pages by leveraging and extending Silk UI’s pre-built patterns.
- I started working in a creative agency, in which I designed for a specific type of context: Business to Consumer or B2C. In this model a business sells a product or a service directly to its consumers. From corporate websites to facebook-like applications, there are a wide range of common solutions that we design.
- When I got into OutSystems, there was a paradigm shift. So, I started focusing on other stuff. I had the chance to start working mostly in an enterprise context. Which means I was no longer designing directly for the consumer. What does this mean, then?
- Definition. The work I developed in both B2C and now B2E gives me a better insight on what the differences between these two models are.
- First major difference: In B2C you have to captivate the users and convince them to use our product, rather than the one from our competitors. It’s basically an art of seduction. You’re working for engagement, therefore you have more creative freedom. You can have richer visuals, which means you have a lot more leeway. On the other hand, B2E applications serve a task, a user story, are essentially catered to help someone’s job. The focus is on efficiency, error reduction, or business productivity. Generally, the amount of information that you need on screen is much more dense, due to the fact that it has to be available from the get go. Combining the user needs with business goals is what B2E is all about.
- Second major difference: On B2C you have to work with a smaller span of attention. Usage is not necessarily sporadic, rather in spurts. Take Facebook as an example. You may use the application in 30 second spurts to check what’s going on, but you keep coming back during the day. In B2E, applications are developed for constant use and focus. Therefore, you’re designing for people that will look at those screens during long spans of time.
- User expectations are on the basis of the 3rd major difference between B2C and B2E. Ever since the release of the iPhone, all the way back in 2007, people have become increasingly used to fluid and engaging apps in their personal lives. These digital products set their global expectations when it comes to using any other kind of application.
- The level of adoption of iOS apps show us that they’re just absolutely mass spread around the world. They have become *the* standard for applications. There is strength in numbers: as of June 2016, there are over 2 million mobile apps available for iOS. And these yield an incredible number of 130 billion apps downloaded This means that, nowadays, people all around the world carry with them standards for what an application should look and feel like. They use these applications every day, all the time.
- B2C elevated the user experience expectations for B2E apps, that’s why they can no longer be those ugly, messy and clunky apps in counterpoint to the great user experience B2C apps have. The impact of these high expectations on enterprise apps is that B2E has to keep up with B2C in terms of user experience and design. And that is why design is important for B2E applications.
- As we talked, from the end to the beginning: 1. Expectations are higher 2. Recurrence of use 3. A good design helps increasing efficiency by fighting for the user needs with business goals These are the key points why design is so important for you B2E application
- Despite the value that design brings to the table, functionality has been traditionally more important than design. Only recently has design gained the attention of decision makers and stakeholders. They are starting to get a better understanding of what is important to end-users and what enhances their productivity. Which should always be the end goal for a B2E app. To this day, UX and UI have smaller budgets due to this fact.
- We have to pick our battles. That’s why you have to focus on designing for the main use cases, and prepare some work to leverage the rest of the project. By main use cases I mean the areas where the users will spend most of their time, that critical path without which the end-users will not be able to perform their day-to-day tasks efficiently. Let me illustrate this to give you a better understanding
- Imagine the iceberg is your project.
- The main use cases are just the tip of the iceberg
- We’re gonna talk about a general approach, how that creates a process and how a handover is done in this scheme of collaboration.
- Development teams nowadays are usually Agile. The same happens at OutSystems. However, there is generally a detachment between development and design teams... which is not very Agile. There are more static deliverables, lacking iterations. Agile is all about the back and forth, with smaller and constant deliverables.
- Ideally, you’d have a 1st big take, in which you: Understand the business goals Try to meet user needs Wireframe and design main use cases And then you have sprint on which you iterate.
- Stephen Hay once said, We’re not designing pages, we’re designing systems of components What does Stephen mean with this? You’re not just designing standalone pages to just beautify portfolios. You’re developing components that belong to an overall design system. They have to speak the same design language and fit well together. They should be modular, reusable and scalable.
- You already have frameworks that help you attain this. They accelerate the design and development processes, ensure consistency while using a shared vocabulary.
- Silk UI is the OutSystems framework of choice for design. It started out as a component that you installed on top of the Platform, but it evolved and became so good that it’s now an integral part of it. These are the advantages of using Silk: Perfectly fit to the platform. Good development experience. Codeless UI framework.
- For further information about silk uI, you should watch the great webinar that Samuel presented from how to go all the way from the basics to its advanced use.
- It all starts with a inter team collaboration. In a nutshell, UX clarifies the business and specific user needs, identifies the user flows and develops wireframes accordingly. UI creates a high fidelity representation on top of these wireframes and development… develops on top of it all. They work their magic, but we try to make their lives as easy as possible but doing all this previous work.
- At OutSystems, UX and UI walk hand in hand. We work very closely, we sit together, we do design reviews together. there is no day we dont speak together or bounce ideas of eachoter. If you want to know a little more about UX and this process, watch Ricardos webinar
- How does UX get to these wireframes? They acquire context by understanding the business and by getting close to the users. From that knowledge, they iterate and start developing these wireframes. They work as guides for the information that we, as UI designers, need to understand the structure of specific main use cases.
- Now we get to the cool stuff! This is where we start exploring the most essential visual elements of our app. For instance: color, typography, buttons are elements that will define most of the aesthetics. This is created by having the context of use and the company brand guidelines in mind.
- As I mentioned these are the areas of highest return from a project’s perspective. Basically because it’s where our users will spend most of their time.
- As I mentioned these are the areas of highest return from a project perspective. Basically because it’s where our users will spend most of their time.
- As I mentioned these are the areas of highest return from a project perspective. Basically because it’s where our users will spend most of their time.
- Apart from designing these key screens, how do we extend the framework for a specific use case. As an example, I’m going to show you a field service app. In this case, the user is inspecting buildings and needs to register the time spent for each part of his inspection.
- After identifying our key screens, we start defining a Style Guide, which is used throughout the entire iceberg — both the tip and the parts that are below water. This is where we help developers when they were usually left all by themselves. This is an accelerator for the developer-customer iterations for creating new screens and/or pages. If you want to play around with one of our Style Guides, check out the Lisbon UI Kit on Dribbble — at dribbble.com slash OutSystems.
- Imagine you have to create a new page. With the Style Guide components that I’m going to identify, you can develop with a look and feel that is both consistent and that speaks the same design language throughout the project. These are the advantages of the modular, reusable and scalable process that is proposed by the design team.
- Our recommendation is that you create a Live Style Guide, which is a transformation of these static elements into interactive components that you are able to use to build your applications in a development environment. To know more about Live Style Guides, make sure you don’t miss the webinar Daniel Reis presented a few weeks ago, where he did a hands-on presentation on how to build one.
- We have a set of tools that help us deliver our work. To ease the transition and provide guidance, we use InVision to map the user flow.
- With InVision you can also establish a simple two way communication with developers and customers. Basically, you can leave or reply comments on any given element that is on screen.
- What’s the magic step that turns a design into something developers can actually use? This is what apps like Avocode, Zeplin or Adobe Assets do. You feed them a design and they “translate” that design into something developers can use. You can pick every single style that is present on screen and get the according CSS. This is just… amazing!
- I bet this is something that left you intrigued, am I right? Say no more, say no more! It’s so amazing that I am going to show you how this works… LIVE. I’m gonna do it live, without a safety net, so bear with me! This is actually gonna be fun. Let’s do it!
- This Giveaway is has some examples of questions you will encounter in your process. Here we discuss things like: More UX related: Why do users come to this page? How often do the users do this? More UI Related: Are you being consistent? Are you populating fields with realistic data?
- 11 Usability rules, here we explain in an easy language for everyone what the basis of usability in design is by 11 examples. Just to list 4 of the topics: Write for Clarity Group Related Info Remove Clutter Build Effective Navigation Easy tips and tricks for you to help you do your job! And well!
- The main takeaway I’d like you to get from this webinar is that this approach, process and handover method can have a great outcome and impact in your work. If you add that to what are the OutSystems Platform underlying advantages, and couple them with the fantastic framework Silk UI is… you have a truly great accelerator for your work and iterations. Transforming that design vision into something that is consistent and reusable by developers in a project, is made that much easier by following this very simple set of guidelines. I hope you have enjoyed watching this webinar as much as I have enjoyed presenting it! Thank you for watching! Cheers!
- The main takeaway I’d like you to get from this webinar is that this approach, process and handover method can have a great outcome and impact in your work. If you add that to what are the OutSystems Platform underlying advantages, and couple them with the fantastic framework Silk UI is… you have a truly great accelerator for your work and iterations. Transforming that design vision into something that is consistent and reusable by developers in a project, is made that much easier by following this very simple set of guidelines. I hope you have enjoyed watching this webinar as much as I have enjoyed presenting it! Thank you for watching! Cheers!