Advances in Information Science and Applications - Volume II
Adaptive design process for responsive web development Zsolt Nagy
thirty years such as spiral model [2], prototype model [3] or Vmodel [4], however the most known and widespread model is the waterfall model.
Abstract—Software development process is complicated and complex. Certain parts of and relations between them require modeling in order to make the process modular and easily understandable. The most known and widespread model is the waterfall model. This model is excellent in cases when we know all the system requirements at the very beginning of the development process. However it is less and less true in real life. Developers need a method, which is quite flexible and makes it possible to modify the design and system development process and architecture based on continuous customer consultations. Such a method is Agile Software Development, although it cannot be used in many cases. We combined both design process with our own experiences and created a new development model called Adaptive Design Process.
Keywords—design process, responsive web, Rich Internet Applications, web development
Fig. 1 Waterfall model
I. INTRODUCTION
This model is excellent in cases when we know all the system requirements at the very beginning of the development process. It requires thorough preliminary survey and research work, not to mention the fact that the customer must be well prepared in the knowledge of the required functionality of the future system. Otherwise altering the design process during development is very expensive; after certain steps it is better to restart the whole process from the beginning.
D
EVELOPMENT of
web-based system gives much more tasks to a software engineer as a traditional software development; the lifecycle of the system, the development process, support and maintenance all differs from a classic software engineering. That is why traditional software development methods are not suitable for web-based systems; more precisely they need certain corrections and extensions. Powel famously describes the complexity of web engineering and web systems in his book:
However, if we own a thorough and detailed plan, both development costs and time can be well estimated. Moreover, a strict, plan-based design process is less sensitive to developer exchanges; it is easy to insert a new employee into our existing developer team. The model features that the next phase will not start until the previous phase has been completed. Thus, a developer who was delegated for a part of the process can work on a different project after finishing his current task. The system is transferred to the users only at the last stage of its life-cycle, then turns out that the software meets the initial specifications or not, the customer got what he wanted or not.
“(Web systems) involve a mixture between print publishing and software development, between marketing and computing, between internal communications and external relations, and between art and technology” [1]. II. CURRENT WEB DEVELOPMENT MODELS A. Waterfall model Web-based systems differ from classic software engineering in many ways; so true it is for the design and development process. Software development process is complicated and complex. Certain parts of and relations between them require modeling in order to make the process modular and easily understandable. Several models were developed in the past
Unfortunately, in real life customers cannot define exactly what they want at the beginning of the project; requirements change and refine during development process. That is why the waterfall model is declined in many cases during business web development. The waterfall model is not prepared for this kind of changes; when a development phase has been completed, it is almost impossible to make any changes on it.
This work was supported by -4.2.2.A-11/1/KONV-2012-0051 Zsolt Nagy is with the Institute of Mathematics and Computer Science, College of Nyiregyhaza, Nyiregyhaza, H4400 Hungary (email:
[email protected])
ISBN: 978-1-61804-237-8
410
Advances in Information Science and Applications - Volume II
III. REASONS FOR A NEW MODEL
B. Agile Methods A method is needed that is flexible, makes it possible to regularly consult with the customer and if a modification is required, it enables with the lowest cost. Such a method is the agile software development, which is the opposite of the waterfall model in many ways. As a small module of a whole system is finished, developers immediately share it for testing and consult with the customer, who can try it, give sudden feedback, refine his needs; continuous consultation and iteration is what agile software development is based on. This method guarantees that the user is satisfied and got what he wanted, even if he could not sufficiently formulate his demands at the beginning of the development. Adamkó (Fig. 2) describes a development process [5] similar to the agile method, which is a more modern version of Murugesan’s model (Fig. 3) [6] and is still appropriate. However, we made a revised, more detailed hybrid method to meet the needs of the demands of the responsive, intelligent web systems.
Riding the wave of fashion of agile methodology, we could say that today’s development process is clearly the agile method, however the method has several drawbacks. Continuous consultation is a great tool, but time-consuming and even if the customer does not have time for us, it pulls back the development. Due to constant revision and changing possibility, more professionals (designer, system designer, front-end, back-end developers) should be available at the same time, as opposed to the waterfall model. In addition, the expected costs and completion deadline is also difficult to estimate. A reasonable assumption is that we can offer a more efficient method for web development by combining the benefits of the two systems. While we worked on our new method, we built in our practical experiences from the business-world and we tried to avoid the mistakes committed by us using inappropriate methodology or by just disregard any methodology in a web development process. As the development of a user interface, design and image of a system is quite important, we built those into our model as well. Previous models elegantly passed this point or just mixed it with the system architecture design, although the so-called “look & feel” has a major importance for the customer and future users. IV. USER INTERFACE (UI) DESIGN
A. Traditional UI Design process So far a proven business practice of making a web design is based on the following process. After analyzing the needs and visiting competitors’ web pages, the customer describes his ideas about the colors, the lookout, the layout and the functionality. Based on it, a sitemap and a wireframe are created then two or three Photoshop design plans are presented to the user. The customer reviews them, chooses the right one or requires a modification, and then finally we have an accepted design plan with customer’s signature. After, a HTML template is made then it will be forwarded to the software developers (Fig. 3).
Fig. 2 Adamkó’s web engineering process
Fig. 3 Murugesan’s web engineering process .
Fig. 4 Traditional design process of a user interface
ISBN: 978-1-61804-237-8
411
Advances in Information Science and Applications - Volume II
project-specific, since similar to the previous steps this is an iterative process as Fig. 5 describes it.
The process seems familiar; yes it is exactly a classic waterfall model. In case of adaptive and responsive web systems, this process is not viable. It is impossible to create the design plan for every single device type and then making it accepted by the customer. We do not have to force this procedure onto the user or onto ourselves. Instead, a faster, iterative method should be used. Viljami [7] and Boulton [8] describe a real-world business design process, which had an impact on creation of the following process.
Fig. 5 Responsive UI development
B. Responsive UI development In the age of responsive user interfaces (UI), we achieve the following steps after an ordinary requirement analysis and information gathering components.
It is clear that in many parts of the development process have resonance for agile software development elements. Thus, both the user interface and the whole web system development process cry for a kind of a combined solution.
1) Sketch After finishing an information gathering process, we create a sketch, mostly using paper and pencil. Although there are very good software in the market, such a helpful one is the Zurb Responsive Sketchsheet 1. Sketches are quick freehand drawings that are not suitable for modeling the final product; instead they play foundation roles in further design processes. Since they can be created very quickly, a sketch is a great tool to throw sudden ideas onto the canvas and show it to the user. Literature experienced experts often encounters the concepts of sketches and wireframes that are usually confused each other. An article of UXMovement clearly describes the difference between them [9].
V. NEW DESIGN PROCESS MODEL No matter how problematic is the waterfall model, the expected duration and the possible costs of a project can be very well estimated by using it. These two factors have high priority considering the development contract; we must fix them at the very beginning of the project. It is also an advantage if we are able to gather as much information as possible for preparing system specification and architecture; a thorough plan greatly facilitates the future work. At the same time, the flexibility of agile methods is essential since the initial functionality always varies and expands in real-world environment. New modules, new navigation structure, new lookout: the competitor offers new services so we should built those on our existing system; marketing experts have found out a new content layout, we should modify the existing layout; the dominant color should not be orange, but light green, we must create a whole new visual design, the customer changed his mind and he needs a geo-sensitive newsletter module and a related admin interface. All the mentioned ones are real examples, for which our development process should be prepared. Based on the above, we offer the following process model for today’s modern and adaptive web system development.
2) Wireframe After finishing the sketch we can start creating a wireframe that is the architectural plan of the prospective interactive user interface. It can be considered as a visual model, however wireframes are omitted in several small and medium size projects. The justification is legitimate; sketches are fast, prototypes are slow, but interactive and informative. Wireframes are between the mentioned ones, neither fast nor informative enough for the customer. 3) Prototype At this point, a sketch-based view is created from the combination of HTML and CSS that can be displayed in different web browsers and mostly on different type and different resolution mobile devices. Basic graphical elements appear at this stage, however detailed elaboration will be carried out only in the next step. 4) Design Typically, this is the phase where design layouts are finished with the help of Photoshop, Fireworks or other graphical software tools. The development of graphical details is 1
http://zurb.com/playground/responsive-sketchsheets ISBN: 978-1-61804-237-8
412
Advances in Information Science and Applications - Volume II
Fig. 6 Adaptive system development model In the following paragraph we are going to describe the mentioned development phases.
faster when he sees specific ideas and samples.
A. Requirement analysis Requirement analysis is the first step of web development; at this point a web engineer has to achieve the following tasks:
B. System design and content strategy In this phase, we determine the components of the system and relationship between those components. Here we describe network and server connections (even it is a client-server, web, application or database server), system modules and their functionalities and services that these modules should implement. This is the stage where the application of a design pattern enters; we determine the system architecture here, the user interface, data model and application logic will be developed and separated from each other. Due to the characteristics of agile methodologies initial system functions and services may change in the future, but the design pattern, the applicable hardware and software technology and development frameworks are specified and fixed here. Content strategy deserves special attention because of the responsiveness; not because of the content of mobile devices differs from the content of desktop computers, indeed. The golden rule of responsive development is: Mobile users want
1. Identify the project stakeholders and assess their needs and experiences. Know the number and type of prospective users of the web system; adjust the system to these criteria and metrics. 2. Determine the services provided by the web system. This step will form the basis of menu and navigation system design and different modules of the web portal will be also determined by those information. 3. Determine what information should be displayed on the web site, how this information will be available and how often will this information change. 4. Assess the customer’s needs in the area of look and feel, safety and maintenance. 5. Get to know similar websites, competitors’ web systems, study their features, strengths and limitations. This step is particularly useful in an information collection process specified in paragraph 3; the customer can formulate his needs ISBN: 978-1-61804-237-8
413
Advances in Information Science and Applications - Volume II
the same content as desktop users. The idea that the view of a mobile web system is a downgraded version of a normal web portal is false. It is also a mistake if someone wants to display the same 960-pixel wide user interface content on a 320 or 480 pixel resolution smartphone. The correct and appropriate content strategy is the “mobilefirst” trend that at first is unusual and different from the previous practice; prepare the plans to mobile platform first. This method has two important advantages: one is a business and the other one is a design aspect benefit.
continuously see the growth of his envisioned system. E. Beta test, final product After all system components are in their correct place, the system is ready for beta testing, quality control, minor bug fixes and then the final product can be presented to the market. This step obviously cannot be described by two sentences but as it is shown on Fig. 6, the process returns again to the sequential waterfall model, so due to space limitations we ignore the presentation of this stage. Coordination and management of a whole project requires special project and team management efforts, so compared to the classical software development methodologies, this method requires significantly more time, energy and qualities from the whole developer team.
1) Business benefit: Growing usage of mobile devices A November 2013 survey of Business Insider [10] shows that 60 percent of online devices are smartphones or tablets, mobile data traffic has a 20 percent share of the whole Internet traffic and 20 percent of mobile users use their mobile devices for online purchases; moreover all three metrics show clear increasing trend.
VI. CONCLUSION In our rapidly developing world it is essential to immediately respond to technical development. So true is it in the field of web engineering. New devices, new technologies and even new customer needs appear in every year, every month, every day. We have to change, improve and upgrade not only our software development environments, but also our existing development, engineering practices, methods. In the age of responsive web, developers need such a dynamic, adaptive new method that we expounded in this article. Although we already use this new model in our real web engineering works, only practical exercises can prove the usability and legitimacy of the adaptive design process.
2) Design benefit: Thoughtful content A smaller screen size helps to carefully ensure the importance of the order of services, size constraints force us to overshadow the less essential elements. A clear, concise user interface has bigger marketing value, quicker and most importantly: the mobile user is satisfied. Of course, more graphical elements, more pictures, more detailed charts, more textual description can be placed on a larger screen, but if we extend an originally well thought content, the relevant information will always remain in focus. C. Iterative design and software development We described the development steps of the UI in the previous chapter; the iterative process used there is the part of the complete development process. Once the graphical design of a user interface has created and ready, a HTML template along with the system plan are transferred to front-end and back-end developers. On this level, software engineering follows the agile method, a software module is created based on the system design, followed by a test and further refining process; this process is also iterative (Fig. 6).
REFERENCES [1]
T.A. Powell, Web design: The complete guide. New York: McGrawHill, 2000. [2] B. W. Boehm, A spiral model of software development and enhancement. Computer, 21(5), 61-72., 1988 [3] J. Hampton, "Prototype models of concept representation.", 1993 [4] J. Conny and C. Bucanac, "The V-Model." IDE, University of Larlskrona/Ronneby 1999. [5] A. Adamko. (2014, May 10) Modeling Web-based Information Systems [Online]. Available: http://ganymedes.lib.unideb.hu:8080/dea/bitstream/2437/78505/5/Web %20alapú%20Információs%20Rendszerek%20modellezése.pdf [6] S. Murugesan, A. Ginige, Web Engineering: Introduction and Perspectives. Software Engineering, 1999 [7] S. Viljami. (2014, Jan 11) Responsive Workflow [Online]. Available: http://viljamis.com/blog/2012/responsive-workflow/ [8] M. Boulton. (2014, Feb 12) Responsive Summit Workflow [Online]. Available: http://www.markboulton.co.uk/journal/responsive-summitworkflow [9] UXMovement. (2014, May 05) Why it is important to sketch before you wireframe [Online]. Available: http://uxmovement.com/wireframes/why-its-important-to-sketch-beforeyou-wireframe/ [10] H. Blodget, T. Danova (2014, Jan 11) The Future of Digital:2013 [Online]. Available: http://www.businessinsider.com/the-future-ofdigital-2013-2013-11?op=1
D. Test, user feedbacks Whenever the design and the code have teamed up, the testing phase comes, and then a freshly born newer edition can be shown to the user. Thus, the customer can immediately test and comment the current system and its functionality. Then further correction, another iteration phase comes based on user feedbacks. It is worth to mention that we are talking about only one or two-week cycles, so the development process is very fast. The customer is satisfied; both because developers constantly consult with him and on the other hand he can ISBN: 978-1-61804-237-8
414
