DOCSLIB.ORG

Layout Inspector

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Layout Inspector Role Relevant Skills Last updated on Lead Designer UI/UX Design March 18, 2019 Visual Design User Research User Testing Requirements Gathering Workshop Facilitation Development Support Layout Inspector Updating the Dropsource layout inspector to support new functionality. Background Mobile apps use constraints to position views on a screen. The original version of Dropsource included a basic layout inspector to help users design their apps. Visualization of a button positioned with constraints. In mobile development, constraints are used to set the size and position of views on an app screen and define how they adapt to different screen sizes. If you are unfamiliar, this is similar in concept to making a responsive website. When we launched the first version of Dropsource a basic layout inspector was included so users could create custom layouts for their app using constraints. Step 1: Understanding the problem Users started hitting the limits of our layout inspector and needed a way to build more advanced layouts. However, supporting this came with an additional complication. ​​ Mockup of the original layout inspector. In the spirit of moving fast, the original layout inspector was launched with the minimum constraint options required to layout a screen: width, height, top, and left constraints. This was enough for users to create basic layouts but was limiting if they wanted to do anything more. For example, it wasn’t possible to pin a view to the bottom right of the screen. As more users started reaching these limitations, this topic kept resurfacing on our support forum. Visualization of pinning a view to the bottom right of the screen. At face value, the answer seems simple, just add more constraint options. However, doing so introduced an additional problem. Constraints have rules that if not followed can put them in an invalid state, causing app screens to render incorrectly. To support more constraint options we also had to address the problem of invalid states and come up with a graceful way for users to deal with them. Step 2: Team Brainstorming Knowing our developers had a better understanding of constraints, I organized a brainstorming session to come up with potential solutions. To kick things off I created a problem brief to align the teams understanding of the problem and prepare them for a brainstorming session. The problem brief I created for the layout inspector. I focused the session on what I saw as our biggest risk, how handle invalid states. At the end of the session we concluded that forcing users to get into and then resolve invalid states would create a lot of unnecessary work and introduce too much complexity. To avoid this, we set out to design a way to enforce a valid state as users were building their layouts. Step 3: Solution Exploration I took the ideas generated in the brainstorming session and explored several design directions. I began ideating on interactions that both enforced a valid state for constraints while also maintaining the flexibility users needed to design their layouts. I shared these concepts with the team for feedback and an initial feasibility assessment. After some back and forth, the team and I landed on possible two directions, both with pros and cons. Sketches of interactions I was exploring. Concept one:​ Prevent users from entering an invalid state in the first place by turning off constraints as users turned on conflicting constraints. Concept two:​ Display an error message prompting users to fix invalid states before proceeding. If they navigate away from the layout inspector before fixing the invalid state, their changes would not be saved and their layout would be reverted to the last valid state. Step 4: Prototyping and User Testing I worked with one of our front-end developers to create a functional prototype of both of these interactions. After a few rounds of testing, we came up with something that worked. Screenshot of the functional prototypes for concept 1 and 2 I took these concepts to one of our front-end developers and asked him to help me create a prototype. While, he was working on the prototype I scheduled 5 moderated user test for the following week. These tests ended up invalidating both concepts, proving both interactions confused users by forcing changes they did not initiate and failed to explain why those changes occurred. After reflecting on these results, we came up with the concept of making users pick from valid constraint combinations rather than giving them the ability to turn on/off all 6 constraints individually. After running another round of moderated user tests the results validated the new concept, allowing users to build their layouts while preventing invalid states. Mockup of the new layout inspector where users pick combinations Step 5: Prepping For Development Requirements and designs were finalized and handed off to the team for development. One page of the mockup handed off to the developers The team was happy to see the results and organized to start development. We hit a few hick-ups but were able to work through them and launch a successful feature for our users. Step 6: Measuring Results Our users were thankful for the updated design and new functionality. We also saw improved layouts in the apps our users were building. After releasing this feature we watched our support forum to see how users responded to the new design and if they ran into any issues. Within short order, we started receiving thanks from our users for the redesign, useful feedback on how to improve the design, as well as a few bug reports (which we fixed right away). "This is definitely a useful update. Previously it was very hard to center elements horizontally and vertically within another view but this new constraint system makes it easy to achieve that now."​ - Sandy H, Computer Science PHD "I've been waiting for this, thank you!"​ - JJ O, Unkown "Thanks Dropsource team. This is a step in the right direction."​ - Tim N, Web Developer Before and after of an app designed with the layout inspector. In addition to written feedback, we also started seeing our users create more refined app designs with sophisticated layouts, which I took as the true sign of success. .
Load more

Recommended publications
  • Lmc 6313 Principles of Interaction Design
    Principles of Interaction Design – LMC 6313 Syllabus Course Number: LMC 6313 Location: Skiles 346 Times: T/Th – 3:00p-3:50p F (lab) – 11:15a-2:00p Instructor: Dr. Anne Sullivan Instructor Email: [email protected] Office Hours: By Appointment (Mondays are the best bet) Office Location: TSRB 317C TA: Takeria Blunt TA Email: [email protected] Course Website: http://canvas.gatech.edu Course Description: What is interaction, what is design, where did these notions come from, and where are they going? Through the activities in this course, you will return to questions of what kind of designer you are and wish to be, what you believe in, and how that will extend to your research and practice. You will also develop your own critical take on the material in the class and sharpen your voice and arguments about your perspectives. Interaction design wasn’t invented from scratch as a singular, monolithic practice. It was born out of the intersection of a number of disciplines from within design and human-computer interaction, and also from art, media, architecture, politics, and philosophy, and beyond. There are many different definitions of what it is and where we fit into it, and no two people we meet in this class will likely have the same definition. And that’s the way it should be. Through my suggestions and yours, we will also turn to design questions in digital culture, film, tv, fiction, gaming, music, art and beyond as we together frame our understandings. As you read, The syllabus, dates, times, assignments, and details are subject to change by instructor notification through Canvas or email.
    [Show full text]
  • General Video Brainstorming for Workshops
    Standard Brainstorming Brainstorming, also known as the Delphi technique, is used to generate innovative ideas. Osborn (1957) introduced brainstorming to create synergy within the members of a group: ideas suggested by one participant would spark ideas in other participants. Subsequent studies (Collaros and Anderson, 1969, Diehl and Stroebe, 1987) challenged the effectiveness of group brainstorming, finding that aggregates of individuals could produce the same number of ideas as groups. They found that production blocking, free-riding and evaluation apprehension were sufficient to outweigh the benefits of synergy in brainstorming groups. Since then, many researchers have explored different strategies for addressing these limitations. For our purposes, the quantity of ideas is not the only important measure. We are also interested in the relationship among the members of the group. As de Vreede et al. (2000) point out, one should also consider elaboration of ideas, as group members react to each other's ideas. Brainstorming sessions have two phases: the first for generating ideas and the second for reflecting upon them. A small group (three to seven people) agree on a specific topic and a limited period of time. The goal is to generate as many ideas as possible, maximizing quantity over quality: Twenty different ideas are better than three indepth ideas. Phase 1 usually lasts from half-an-hour to an hour, depending upon the topic and the group. Sessions longer than an hour are not recommended. Even if ideas are still flowing, the group should stop when time is up. It is better that everyone leaves feeling energized and excited by the ideas rather than tired and bored.
    [Show full text]
  • An Overview of the Building Delivery Process
    An Overview of the Building Delivery CHAPTER Process 1 (How Buildings Come into Being) CHAPTER OUTLINE 1.1 PROJECT DELIVERY PHASES 1.11 CONSTRUCTION PHASE: CONTRACT ADMINISTRATION 1.2 PREDESIGN PHASE 1.12 POSTCONSTRUCTION PHASE: 1.3 DESIGN PHASE PROJECT CLOSEOUT 1.4 THREE SEQUENTIAL STAGES IN DESIGN PHASE 1.13 PROJECT DELIVERY METHOD: DESIGN- BID-BUILD METHOD 1.5 CSI MASTERFORMAT AND SPECIFICATIONS 1.14 PROJECT DELIVERY METHOD: 1.6 THE CONSTRUCTION TEAM DESIGN-­NEGOTIATE-BUILD METHOD 1.7 PRECONSTRUCTION PHASE: THE BIDDING 1.15 PROJECT DELIVERY METHOD: CONSTRUCTION DOCUMENTS MANAGEMENT-RELATED METHODS 1.8 PRECONSTRUCTION PHASE: THE SURETY BONDS 1.16 PROJECT DELIVERY METHOD: DESIGN-BUILD METHOD 1.9 PRECONSTRUCTION PHASE: SELECTING THE GENERAL CONTRACTOR AND PROJECT 1.17 INTEGRATED PROJECT DELIVERY METHOD DELIVERY 1.18 FAST-TRACK PROJECT SCHEDULING 1.10 CONSTRUCTION PHASE: SUBMITTALS AND CONSTRUCTION PROGRESS DOCUMENTATION Building construction is a complex, significant, and rewarding process. It begins with an idea and culminates in a structure that may serve its occupants for several decades, even centuries. Like the manufacturing of products, building construction requires an ordered and planned assembly of materials. It is, however, far more complicated than product manufacturing. Buildings are assembled outdoors by a large number of diverse constructors and artisans on all types of sites and are subject to all kinds of weather conditions. Additionally, even a modest-sized building must satisfy many performance criteria and legal constraints, requires an immense variety of materials, and involves a large network of design and production firms. Building construction is further complicated by the fact that no two buildings are identical; each one must be custom built to serve a unique function and respond to its specific context and the preferences of its owner, user, and occupant.
    [Show full text]
  • Lean Product Launch: 3 Ways 3P Events Can Reduce Waste, Risk, and Time to Market
    LEAN PRODUCT LAUNCH: 3 WAYS 3P EVENTS CAN REDUCE WASTE, RISK, AND TIME TO MARKET www.viantmedical.com / [email protected] By Todd Clark Program Manager INTRODUCTION Get a diverse group of smart people in a room and present them with a challenge. Brainstorm ideas and collaborate to choose the best solution. Build a mockup and simulate the process to learn as much as you can before bringing it into the real world. Sounds like a solid foundation for a successful a product launch, right? We think so, too. In a nutshell, that’s what happens during a Lean Production Preparation Process (3P) event. For more than a decade, Viant teams have been leveraging Lean Product Development and Lean Product Launch techniques to improve product quality, lower cost, and speed time to market. We’re bringing Lean to life across the product lifecycle to support our customers in expanding their product offerings, optimizing their supply chains, and managing costs on a global scale. Both Lean Product Development and Lean Product Launch have Lean principles at their core, like identifying and reducing waste. Both use Lean tools, including cross-functional teams and set-based design. However, Lean Product Development is used earlier in the product lifecycle and focuses on the process of product design. While there is often some overlap, Lean Product Launch happens later in the product lifecycle and focuses on the design of the manufacturing process. 3P is a Lean Product Launch tool that has been particularly effective for our customers. 3P events bring stakeholders together to identify and reduce waste in every step of a process, thereby increasing efficiency, de-risking the manufacturing process, and compressing the timeline.
    [Show full text]
  • Sres Logo Download What Is SRE (Site Reliability Engineering)? Site Reliability Engineering (SRE) Is a Software Engineering Approach to IT Operations
    sres logo download What is SRE (site reliability engineering)? Site reliability engineering (SRE) is a software engineering approach to IT operations. SRE teams use software as a tool to manage systems, solve problems, and automate operations tasks. SRE takes the tasks that have historically been done by operations teams, often manually, and instead gives them to engineers or ops teams who use software and automation to solve problems and manage production systems. SRE is a valuable practice when creating scalable and highly reliable software systems. It helps you manage large systems through code, which is more scalable and sustainable for sysadmins managing thousands or hundreds of thousands of machines. The concept of site reliability engineering comes from the Google engineering team and is credited to Ben Treynor Sloss. SRE helps teams find a balance between releasing new features and making sure that they are reliable for users. Standardization and automation are 2 important components of the SRE model. Site reliability engineers should always be looking for ways to enhance and automate operations tasks. In this way, SRE helps to improve the reliability of a system today, while also improving it as it grows over time. SRE supports teams who are moving from a traditional approach to IT operations to a cloud-native approach. What does a site reliability engineer do? A site reliability engineer is a unique role that requires either a background as a software developer with additional operations experience, or as a sysadmin or in an IT operations role that also has software development skills. SRE teams are responsible for how code is deployed, configured, and monitored, as well as the availability, latency, change management, emergency response, and capacity management of services in production.
    [Show full text]
  • Design Thinking and Applied Ideation
    Design Thinking and Applied Ideation . Thinking about problems . Brainstorming and ideation . Improv and collaboration our h y etc Sk m ble . Practice brainstorms pro . Scenarios and storytelling . Presentation and wrap Gayle Curtis E110 – 14 January 2010 Thinking about problems Investigate Contextualize Brainstorm Cluster Explain Evaluate Observe Substantiate Explore: Analyze Diagram Try out on Record Diagram Alternatives Prioritize Mockup stakeholders Analyze Explain Possibilities Eliminate Express Test with Understand Articulate Choices Elevate Build users Discover Define Ideate Evaluate Prototype Test Iterate Problems Solutions Reframe Redefine Reprioritize Redirect Replan 2 Ideation and inspiration Genius is one percent inspiration and ninety-nine percent perspiration. Thomas Edison, inventor Inspiration is for amateurs. The rest of us just show up and get to work. Chuck Close, artist 3 Brainstorming Defined by Alex Osborn in 1939 “Storming a problem in a commando fashion” . “Your Creative Power,” 1949 . “Applied Imagination,” 1953 Took on a life of its own . BBDO - Alex Osborn . MIT Creative Engineering Lab - John Arnold . Stanford Design Division - Bob McKim . IDEO . d.school at Stanford and Potsdam Sources: _; Verner Reed/Time & Life Pictures/Getty Images; Gayle Curtis 4 The Osborn Rules for Brainstorming 5 Osborn Rule #1 DEFER JUDGEMENT Say Yes! Source: Doré 6 Fifty phrases that kill creativity . Our place is different . Now's not the right time. It can't be done. We tried that before. It isn't in the budget. It's too much trouble to change. It costs too much. Can't teach an old dog new tricks. It won't pay for itself. That's not my job. Good thought, but impractical.
    [Show full text]
  • Rapid Design Using Web Based UI Design Tools, Case: Contriboard
    Rapid design using web based UI design tools, Case: Contriboard Heli Sutinen Bachelor’s Thesis December 2014 Degree Programme in Media Engineering School of Technology, Communication and Transport Description Author(s) Type of publication Date Sutinen, Heli Bachelor’s thesis 12.12.2014 Language of publication: English Number of pages Permission for web English 75 publication: x Title of publication Rapid design using web based UI design tools Case: Contriboard Degree programme Media Engineering Tutor(s) Niemi Kari Assigned by JAMK University of Applied Sciences , Need for Speed Program, Rintamäki Marko Abstract The thesis is assigned by JAMK University of Applied Sciences and Digile Need for Speed Program (N4S). N4S Program acts as an accelerator for a new ways of working from Agile and LEAN development to Real-time Delivery. The program focuses on research in three areas: real time value delivery, deep customer insight and mercury business - finding the new money. The purpose of the thesis was to research web based UI design tools and the effect of tools being part of the software development process. One of the main research questions was to discover if UI design tools speed the development process when used in designing. The research of web based UI design tools was conducted by evaluating and selecting the most suitable ones to support the development process of a product called Contriboard. Contriboard is a brainstorming and collaboration tool and reference product for Need for Speed Program developed by N4S@JAMK team. The evaluation was executed by tripartite testing of UI design tools. The first part included testing of larger amount of tools with the help of three summer trainees.
    [Show full text]
  • Design by Prototype: Examples from the National Aeronautics and Space Administration Gerald M
    Design by Prototype: Examples from the National Aeronautics and Space Administration Gerald M. Mulenburg and Daniel P. Gundo, National Aeronautics and Space Administration, Ames Research Center MS 273-74 Moffett Field CA 94035 Abstract: This paper describes and provides exa.mples of a technique called Design-by-Prototype used in the development of research hardware at the National Aeronautics and Space Administration's (NASA) Ames Research Center. This is not a new idea. Artisans and great masters have used prototyping as a design technique for centuries. They created prototypes to try out their ideas before making the primary artifact they were planning. This abstract is itself a prototype for others to use in determining the value of the paper .. it describes.-. At-.-: the Ames Research Center Design-by-Prototype is used for developing unique, one-of-a-kind hardware tor small, high-risk projects. The need tor this new/old process is the proliferation of computer "design tools" that can result in both excessive time expended in design, and a lack of imbedded reality in the final product. Despite creating beautiful three-dimensional models and detailed computer drawings that can consume hundreds of engineering hours, the resulting designs can be extremely difficult to make, requiring many changes that add to the cost and schedule. Much design time can be saved and expensive rework eliminated using Design-by-Prototype. Key Words: Prototype, prototyping, rapid-prototyping, design-by-prototype, prototype- uege-dnei ,,,,g~, product developmefit, iiew product development, piGjj.ect mafiagement, project design, project cycle-time. Introduction Is there anything new about project management as it relates to new product development? Project management is changing, but in this author's view, not fast enough and, according to Frame (2002),".
    [Show full text]
  • Exploration of Auditory Augmentation in an Interdisciplinary Prototyping Workshop
    Exploration of Auditory Augmentation in an Interdisciplinary Prototyping Workshop Katharina Groß-Vogt, Marian Weger, Robert Holdrich¨ Institute for Electronic Music and Acoustics (IEM) University of Music and Performing Arts Graz, Austria Email: [email protected], [email protected], [email protected] Abstract—Auditory augmentation has been proposed as a II. WORKSHOP LAYOUT specific, ambient sonification method. This paper describes an The workshops of the Science by Ear series are structured interdisciplinary workshop exploring this method by designing prototypes. Three of the prototypes are presented and discussed. as follows. About 20 people with different backgrounds are in- Concluding on the workshop’s results, the authors suggest a vited to participate: sound and sonification experts, researchers broader definition and deduce limitations of auditory augmenta- of a certain domain science, and composers or sound artists. tion. During the workshop, they take the roles of programmers, sound experts, data experts, and others (e.g., moderators of I. INTRODUCTION the teams). One workshop takes place on three or four days. After some introduction, participants are split into three to Sonification, in the authors’ definition, is the translation of four teams of about five people. Each team is working on one information for auditory perception, the acoustic equivalent to sonification task with a given data set for three hours. Team data visualization [1]. Our institute pursues the Science by members always include a moderator who also takes notes, and Ear (SBE) workshop series on sonification. Since 2005, four one or two dedicated programmers who implement the ideas of these workshops took place. They explored sonification in of the team.
    [Show full text]
  • 3P in New Product Development and Operational Transformation
    3P in New Product Development and Operational Transformation Paul Betley 3P Coach Ingersoll Rand Our Climate Businesses COMMERCIAL HVAC Air conditioning systems, services and solutions. Innovative solutions geared toward making high-performance buildings reliable and safe, as well as healthy, comfortable and efficient RESIDENTIAL HVAC & SUPPLY Heating, cooling, thermostat controls and home automation for the residential market and a complete selection of innovative parts, options and accessories for optimal performance and reliability TRANSPORT REFRIGERATION Manufacturing and innovation of transport temperature control systems for a variety of mobile applications, including trailers, truck bodies, buses, shipboard containers and rail cars 2 Our Industrial Businesses COMPRESSION TECHNOLOGIES AND SERVICES CLUB CAR Rotary, centrifugal and reciprocating air compressors, and Consumer, commercial and golf treatment products with comprehensive multi-year service vehicles that provide efficient and agreements, audits, parts, and accessories reliable transportation POWER TOOLS Professional tools for fastening, drilling and surface preparation MATERIAL HANDLING Hoists, winches and systems for moving and positioning loads FLUID MANAGEMENT Pumps and systems for fluid handling, transfer and application 3 3P Story at IR • “Throw it Over the Wall” NPD • 2010 Thermo King Product Redesign • New Leadership with 3P Experience • Hired 3P Experts to show us how • 3P now Standard Work for NPD • Beginning using 3P to enhance OpEx journey 3P – Production Preparation
    [Show full text]
  • NX for Mechanical Design
    NX for Mechanical Design Benefits Summary • Facilitates design control, The NX™ software for mechanical design provides a comprehensive set of speeds the design process, leading-edge CAD modeling tools that enable companies to design higher increases designer and quality products faster and less expensively. The NX comprehensive design team productivity and mechanical design solution lets you choose the tools and methodologies that improves design throughput best suit your design challenge. Innovative technologies deliver breakthrough • Improves design team mechanical design capabilities that set new standards for speed, performance performance, especially for and ease-of-use. handling large, complex models Transforming product development by delivering greater power, speed, • Raises product quality by quality, productivity and efficiency for mechanical design minimizing design errors NX mechanical design capabilities are unmatched in terms of the power, • Produces faster, more versatility, flexibility and productivity they deliver to your digital product accurate and complete development environment. NX enables you to establish a complete design product documentation solution for your environment, including leading-edge tools and • Produces significant time, methodologies for: effort and cost savings by • Comprehensive high-performance modeling, which enables you to facilitating design re-use seamlessly use the most productive modeling approaches – from explicit • Facilitates better integration solid and surface modeling to parametric, process-specific and history-free and coordination between direct modeling that works with models from any CAD system. multiple design disciplines, • Active mockup and assembly design, which enables you to work design teams and their interactively with massive multi-CAD assemblies while leveraging leading related CAD systems assembly management and engineering tools.
    [Show full text]
  • Download on the Web
    A Comparative Study of Milestones for Featuring GUI Prototyping Tools Thiago Rocha Silva1, Jean-Luc Hak1,2, Marco Winckler1, Olivier Nicolas2 1ICS-IRIT, Université Paul Sabatier, Toulouse, France {rocha,jean-luc.hak,winckler}@irit.fr 2SOFTEAM/CADEXAN, Toulouse, France {jlhak,onicolas}@e-citiz.com Abstract Prototyping is one of the core activities of User-Centered Design (UCD) processes and an integral component of Human-Computer Interaction (HCI) research. For many years, prototyping was synonym of paper-based mockups and only more recently we can say that dedicated tools for supporting prototyping activities really reach the market. In this paper, we propose to analyze the evolution of prototyping tools for supporting the devel- opment process of interactive systems. For that, this paper presents a review of the liter- ature. We analyze the tools proposed by academic community as a proof of concepts and/or support to research activities. Moreover, we also analyze prototyping tools that are available in the market. We report our observation in terms of features that appear over time and constitute milestones for understating the evolution of concerns related to the development and use of prototyping tools. This survey covers publications published since 1988 in some of the main HCI conferences and 118 commercial tools available on the web. The results enable a brief comparison of characteristics present in both aca- demic and commercial tools, how they have evolved, and what are the gaps that can provide insights for future research and development. Keywords Prototyping Tools, Survey, Milestones, Graphical User Interface (GUI) 1. Introduction Every project is unique in terms of the business and technical problems that arise, the prior- ities assigned to it, the resources required, the environment in which it operates, the culture of the stakeholders, and the project manager's attitude used to guide and control project ac- tivities.
    [Show full text]