Mobile Application Development Lecture 4+5 PDF

MOBILE APPLICATION DEVELOPMEN T Lecture 4+5 CHAPTER 3: CREATING CONSUMABLE WEB SERVICES FOR MOBILE DEVICES 2  What is Web Services for mobile App? applications are continually emerging and changing as a result of the increased needs of the users for conne...

MOBILE APPLICATION DEVELOPMEN T Lecture 4+5 CHAPTER 3: CREATING CONSUMABLE WEB SERVICES FOR MOBILE DEVICES 2  What is Web Services for mobile App? applications are continually emerging and changing as a result of the increased needs of the users for connectivity features and Web Services. In brief, it can be said that Web Services are the part of the server (API) that handles data for mobile apps. As a broad term, a web service is a type of software that can help streamline every aspect of a mobile application and integrate it for other Web Services. Web Services include protocols, standards, and requirements for the exchange of web-based information, data, and communications. For example, a web service for a mobile app can help to contain, publish, distribute, process, and communicate across the web. Typically, Web Services for mobile apps are built on top of already- existing development languages, such as HTML, CSS, and JavaScript. As Web Services are more and more needed in the mobile world, specific attention is placed on their testing, as this could make the 3  Requirements of Web Services In order to be considered as a “Web Service”, the software application must meet the following requirements: It must use an XML messaging system to communicate and correspond to all commands It is not based on any single programming language or operating system It is a self-describing and self-contained program that uses XML language It must be available over the Internet and can include availability over private or intranet networks as well 4  Components and Functionalities of a Web Service for Mobile Apps There are a few basic components of Web Services that make it easy to identify and apply to mobile applications. The Simple Object Access Protocol (SOAP), the Universal Description, Discovery, and Integration tool (UDDI), and the Web Services Description Language (WSDL) are the main components of a web service that make it available for use. These features help the application communicate and run on any web-based service, such as an Internet browser or web-based device. Web Service Programs are often categorized as a backend development, offering a framework that works specifically in mobile app development. Other types of applications that are not mobile-based have a longer history of frameworks and features that help to streamline it – but in the world of mobile apps, there are still many developments in their infancy. This is why the dawn of Web Services is so important for the future of mobile applications. Some popular Web Services tools for mobile applications include iCloud and Dropbox, as well as Urban Airship and AWS SDK, which is great for both iOS and Android application developments. 5  How can Web Services be tested? For testing, you might need to install some licenses to be prepared to intercept the calls and edit them. The device might warn you if someone is checking out your network traffic – this is because related to the Man in the central penetration testing process. If you notice that all calls are declined due to SSL, it means you have forgotten to install the certificate, or the license is void. Mostly, the developers manage these issues, but after a refactoring, some fail- safes are removed unnecessarily. Another neglected aspect you should also test is caching. Some libraries store the data and automatically present it if they get the header from the API. For example, “Cache-control: max-age=31536000” will save the response for one year, which might not be such a useful purpose if you need to change it quickly. These are just some tips and essential aspects that are noticed and gathered over the years while performing Web Services testing. It is always more beneficial to test for basic human mistakes than to create a data update and receive objections that the app is not working. 6  Things to Consider After understanding the details of Web Services for mobile applications, it is important to know that there are several things that must be considered when it comes to choosing a Web Services framework for your mobile application. You will need: A REST API – this is something that can be incorporated on to your backend server that will help you apply your data to a web service hosting platform. A data parse – parsing data is essential for effective web translation, especially when it comes to iOS platforms. Internet availability – this goes without saying, but part of Web Services features is the ability to connect your mobile app to the web, and without it, your app would not be available for download. 7 Chapter 4 :Mobile User Interface (Mobile UI) 8  What Is Mobile UI? A mobile user interface, or mobile UI, is the display or screen on a mobile device. It’s the space where users can interact with what’s on the screen – from menu buttons to text fields (and everything in between, depending on whether users can tap, scroll, swipe, type, or just see it). Most of these user interactions are touch-based and happen on colorful touch screen displays that are bursting with high-level interactions. Naturally, basic mobile UI design principles differ from those of a traditional desktop UI. 9 Design falls into the category of craftsmanship: you do something until you are good at it, and then keep doing it until you are better. But many developers are too excited to solve the next functionality puzzle to spend much time with interface questions like appropriate color contrast or font. Don’t miss out on amazing design puzzles. 1 0  Why Is Mobile App UI Design Important? A well-designed User Interface and User Experience draw the attention of target audiences toward a mobile app. As per a study by Forrester, good UI can raise the conversion rate of a website by 200% and UX design by 400%. Around 90% of smartphone users’ time is spent on Mobile Apps as per Insider Intelligence and 90% of users will leave an app solely based on the bad design. Designing a mobile app interface is not restricted to just creating a few eye-catchy designs or making navigation straightforward, it works with the aim to improve user interaction and solve what they are looking for through a mobile app layout design. While it has been established how the success of your app relies on how well and efficiently you design mobile app UI, let us dive into the concept further. 1 1  Importance of mobile interface 1. Saves time and cost in the long run By keeping the critical user interface design guidelines for mobile applications in mind, you will be able to save the time and cost that would go behind revamping the app again and again. Furthermore, the initial time investment in android user interface design or iOS app user interface design can lessen challenges during and after the launch. 2. Attract and retain loyal customers Good UI grabs the attention of the user and makes sure they stay. Having an intuitive UI can make users stick around and come back many times and recommend the app to others too. 3. Helps build a brand The purpose of a good UI is to make the content engaging and navigation less complicated. It helps the user understand the app flow easily, thus increasing satisfaction, and ultimately building a good market value and surpassing the competition. For example. Amazon has one of the cleanest android/iOS user interface elements as products are easily navigable, and the application is very user-friendly. 4. Assists with getting the app featured in app stores An excellent mobile app design is determined by how many users like it. With a good UI/UX, getting good ratings and reviews from satisfied users becomes easy, which in turn, brings the mobile app to the top lists of any category, while pushing more traction towards your app. 1 2  Mobile User Interface Design: Components Many people mistakenly believe that mobile user interface design is only about how an app looks. However, the truth is that it’s much more about how the app works than the aesthetics. But, of course, the appearance of the application’s interface is also a factor that UI designers consider. Developing a product that people love often requires both good UI and good UX. For example, you could have a banking app that looks great and has intuitive navigation (UI). But if the app loads slowly or makes you click through numerous screens to transfer money (UX), it doesn’t matter how good it looks. You’re probably not going to want to use it 1 3  Difference between UI and UX UX, meaning User Experience, focuses on optimizing the app in order to make it pleasant and easy to use. This is the part of application design that’s responsible for completing a variety of functional tasks. Meanwhile, UI deals with the presentation of these functions to the user. Both UX & UI design services are integral parts of custom mobile app development. They simply come into play during different stages of this process. 1 4  Mobile User Interface Design: Components Question User’s interaction with the app. Application’s aesthetic. 1 5 Quiz until here 1 6  Pattern of User Interfaces for Mobile Apps the most important thing to remember is that not all mobile UI designs are identical. They vary from brand to brand and on platforms it gets live on. Each screen you see on your mobile app has a different meaning and processing rules to enhance the user experience. Here are different types of mobile UI patterns that you must know. 1 7  1. Splash Screen the first screen you see on the launch of any app that shows the name of the app is the splash screen. It is used as a way to conceal the processing time and help the user know that the app is being prepared in the back. In addition, some apps come with illustrations, headlines or a loading pop-up message/moving dot to keep the users engaged and interested in the app. 18  2.Onboarding Screen these screens help first- time users understand the app’s main features, which tell them about the app’s next steps, essential elements, and functionality and make the user journey less complicated. 19  3. Home Screen The main screen of the entire app. All other screens are linked to the home page as it highlights the functional menu and features. Ideally, the icons on the home screen mustn’t merge, should be visible and in a designated place. 20 4. Login and Profile Screens Most apps have a login id before you start using them. The right UI design of a login screen must clear all unnecessary distractions and make the experience quick, interactive and smooth. The profile screen, on the other hand, holds all your information and progress and must provide customization to the fullest. 21 5. App Screens App screens are an essential part of any app. In the context of mobile app design, they are the main screens that users interact with. They are designed for the purpose and the services the app provides. Users can use the search field to enter what they want and get the content easily. 22 Navigation Good design makes it clear how users can move through and use application features 1. Annunciator Panel An annunciator panel, seen at the top of Figure 4-7, gives information on the state of a mobile device. Though each mobile device will provide a slightly different panel, developers can modify or suppress the annunciator panel — which lists the hardware features such as network connection and battery power — within an application. Because the information in this area is only notifications, application users will not usually have any direct interaction with the annunciator panel. 23  Navigation 2.Fixed Menu A menu that remains fixed to the viewport as users roam content is useful in many situations: ➤ When users need immediate access to frequently selected functionality on multiple screens ➤ When a revealable menu is already used on the same screen ➤ When a lack of controls, conflict with key interactions, or low discovery makes a revealable menu a poor choice Because fixed menus are always accessible (at the bottom and top of Figure 4-8), users can interact with page content as needed; keep in mind the small screen real estate, and limit any fixed menus to the absolute necessities. 24 Navigation 3. Expandable Menu When all function options for one page cannot fit on the viewport, an expanding menu can provide selectively available options: a full menu similar to the one shown in Figure 4-9 will reveal once prompted. A gesture, like a swipe or double tap, may prompt the reveal as well as selecting an on- screen icon. Soft keys — hardware buttons connected to on- screen labels — may also prompt a menu to reveal. Users often bene- fit from multiple access options, especially for the harder-to-find gestural prompts. Users may exit a menu using a back button, a close button that is part of the revealed menu list, or by toggling with the same gesture or soft key that prompted the reveal. Try to keep close functionality on the screen while the menu is revealed. 25 Navigation 4. Scroll As in the case of a revealable menu giving additional functionality, there will often be more content on a screen than can be seen in the device viewport. It is best to limit scrolling, limiting application screens to the size of the viewport whenever possible. Some types of apps you develop will require scrolling to present data to the user effectively, such as an email client. When scrolling must occur, check that the design communicates the area that can be scrolled, the current context of a user, and the ratio of the current view to the total content available. Easy navigation keeps people connected, instead of losing users to navigational frustrations. Only in-focus items should be able to scroll. Make an application more immersive, incorporating gestures such as tilting to scroll through content. Make sure that scrolling takes place only on a single axis, if possible. When scrolling must occur both horizontally and vertically, consider providing a thumbnail of the user’s place within the entire scrolling area. The vertical list (Figure 4-10) simply displays textual information, and is the foundation of information display on many mobile devices.. 26 Notifications and Feedback If the user needs new information, application creators must use notifications. These prompts pause ongoing tasks, and enable users to change processes and behaviors according to the new information or feedback. Feedback is the user-perceived result of an interaction, providing immediate confirmation like a color change, message, or being led to a new page. Delayed feedback leads to user frustration and redundant, often error-inducing input; confirmation feedback is useful when user data could otherwise be lost, and should be indicated with a distinct change in state from the initial view. Notification can inform a user (presenting a single button to close the notification), offer the ability to cancel a process or correct an error, or give multiple options from which to select. A user should never be presented with more than three options from any notification. 27 28  UNDERSTANDING MOBILE APPLICATION USERS While standing in line at the bank or a restaurant, people pull out their mobile devices to check in, entertain, and consume another dose of content. You can borrow metaphors from the real world, like a trash can or recycle bin holding deleted files; favor industry standards and make sure interface metaphors are appropriate to the device. Don’t be afraid to take new risks, but look to past design concepts to frame new ideas. The Gestalt principles have had a considerable influence on design, describing how the human mind perceives and organizes visual data. The Gestalt principles refer to theories of visual perception developed by German psychologists in the 1920s. According to these principles, every cognitive stimulus is perceived by users in its simplest form. Key principles include proximity, closure, continuity, figure and ground, and similarity 2 9 UNDERSTANDING MOBILE APPLICATION USERS 3 0 UNDERSTANDING MOBILE APPLICATION USERS 3 1 UNDERSTANDING MOBILE APPLICATION USERS 3 2 Top Tips for Fantastic Mobile User Interface Design Mobile UI designs are incredibly versatile, which you can quickly see by browsing any App Store. Therefore, it’s impossible to say that there is one ultimate formula for an outstanding UI. You also need to understand that the purpose of the application drives the UI design. It means that enterprise app design can differ significantly from a mobile game interface or a small cafe’s app. Design is also a large factor in determining the cost of custom mobile app development services. But you can do many different things to ensure your design is effective and beautiful regardless of the budget. The following tips will help yo 3 3  User Acceptance Testing Understand your users — their behaviors, and their goals — with accurate measurement and thorough analysis. User Acceptance Testing (UAT) is an organization-specific, and a project- specific, process. But the right tools help application designers qualitatively and quantitatively know what users are doing, and what stakeholders are getting wrong. 3 4  Plain Language “Plain language” is the idea that content producers should speak in the language of their users, in a way that is clear and understandable to the audience. Content usability is one of the most important factors for task success, and plain language is usable language. Because of the limited space of a mobile device screen, these tips are especially relevant to mobile application creators: ➤ Omit unnecessary words. Take the first draft and cut it in half, and then see if you can cut it in half again (you probably can). ➤ Use the simplest form of a verb. ➤ Use short, simple words; avoid jargon and abbreviations. ➤ Use pronouns. For more guidelines and in-depth examples, see http://www.plainlanguage.gov. 3 5  Keep it simple Navigating your app must be straightforward. Therefore, making it supremely easy for the user to understand and actually use is the priority of UX/UI design services. Moreover, the app should have as few distractions as possible. In terms of mobile user interface design, it means not overusing visual elements, such as fonts. In fact, you should use few fonts and only one or two major elements on a single screen. For example, this could be a banner and a CTA button. Your goal is to ensure maximum usability and boost the emotional impact made by each visual element. 3 6  Make it consistent When thinking about UX/UI design services, you have got to think at a scale. In the best-case scenario, you must have a consistent design across your entire brand. It means you need to use the same colors, fonts, graphic styles, etc., for the mobile user interface design, website design, your merch, and printed marketing materials. Make your brand style consistent to increase your visibility. But most importantly, this consistency helps boost customer loyalty. People must know that whenever they see something similar, they are dealing with the brand they trust and love. To that end, it’s imperative that you research your target audience well before developing the brand design. It’ll help you find out your audience’s interests and preferences. Then, use them for inspiration to make your brand image more relatable. 3 7  Stick to familiar images and shapes It’s human nature to look for familiar in the unknown. So, even if your app is unique, your mobile user interface design should include familiar elements to help people understand and navigate it. The shape of icons and colors, in particular, should adhere to common standards. Actually, it will be good for you because it allows using many free libraries in your UX/UI design services. Therefore, the overall cost goes down without compromising the quality. Stick to the core UI design principles Accessibility is the priority when designing a button. And if you want an accessible button, it has to have the right shape, size, and padding. Shape – depends. For example, in android UI, a flat and raised material button has to be 36dp high, have a minimum width of 88dp, and have a 2dp corner radius (flat). Size – for optimal usability and information density, Android’s Material Design advises that touch targets should be at least 48 x 48dp, with at least 8dp (or more) between them. Padding – that’s the white space around components or content. There should be enough of it, so the users don’t get overwhelmed. 3 8  Make it interactive Interactivity is a colossal hit in UX/UI design services, in general. Therefore, making your app as interactive as you can is always a good idea. Not only does interactivity make an app look cooler. But it also eases navigation further. On a side note, using a variety of colors is essential for interactive elements. However, you need to make sure that these colors are part of your brand’s color scheme. In addition to that, remember not to use too many of them. Making your app too colorful can make it look cluttered and harder on the eye. Vision comfort is an important consideration. People won’t be able to use your app for long if it makes their eyes hurt. For example When contrasting buttons, stick to the basic rules. Use low contrast for neutral actions, medium contrast for negative actions, and high contrast for positive actions 3 9  Find a balance between image quality and loading speed Mobile user interface design must be attractive. Therefore, using top-quality, high-resolution graphics is a must. But you also need to make an app that loads and works fast. It means you need to find a UI/UX design services provider that can make your app fast and beautiful at the same time. This is where developers and designers have to work close together to bring the best possible result. That’s why it’s imperative to hire an experienced team that knows how to tackle any challenge in custom mobile application development. 4 0  User feedback & support Your mobile user interface design must also include features that will enable you to collect user feedback and offer support. These are both must-haves because they do not only increase your audience’s satisfaction with the product. They also show that you care about people and want to create a genuinely user-centered design. Also, the data that comes through these sources will help you. You will be able to identify the weaknesses in your app and fix them fast. But most importantly, you’ll know what your users want. Therefore, you can launch updates that will make your app even more desirable. Ex: Reward users with visual feedback Users love excellent visual feedback. It helps them know if they’re doing something right or wrong. A perfect time to provide some visual feedback is right before the user clicks on the primary button. Offer a free trial or sign up for the newsletter. When making visual feedback, make sure the buttons change colors as the action is accepted. In addition, some animation and motion will engage users more. 4 1  Best Mobile-app Design Examples When developing a UI, some mobile UI patterns can be so recognizable that they inspire app developers to develop other apps similarly. This section will cover examples of good UI designs for mobile apps in the market. Starbucks The app is focused on providing users with what they are looking for – buying on their app – easy, efficient, and enticing. The overall aesthetics and visuals on the app are of the utmost quality. The top and bottom of the app are sticky, they clearly show the menu and your order on the screen, thus promising a quick in and out experience. 4 2  Best Mobile-app Design Examples Whatsapp The world’s most preferred call, text, and video messaging app that keeps you connected to friends and family anywhere in the world. The app is super easy to use and navigate and easily customizable in terms of colors palette and displays per the user’s needs. Airbnb Airbnb is a giant in the hospitality industry, with operations in over 190 countries. The company’s app is live in all locations and features a stellar UI/UX to date. The app has a bottom navigation bar in both the Android phone interface and iOS versions, making it consistent and comfortable across platforms. The reason these apps made it to our list is that these are those successful app UI examples in the market that have an outstanding interface, are extremely well-designed, and are built to attract potential users easily. 4 3  Mobile App Designs Tools Depending on your application and its functionality, your choice of how you design your UI will differ. : The tools needed to create the UI that will do justice to your mobile application. The following common 12 mobile application UI design tools will equip your team with the necessary elements needed to create the ultimate UI. 4 4  1. Adobe Photoshop Photoshop has been the preferred design tool of professional designers over the years. Photoshop can be used to create interfaces for complex mobile applications. The basic features for this program are easy to grasp, but there are many features that will take some training to utilize. 2. Sketch If you are a Mac user, Sketch is an excellent professional design tool. Launched in 2010, Sketch is a vector-based design program that rivals Adobe Photoshop. The user-friendly layout makes Sketch perfect for beginners. This tool is modern and places its focus squarely on creating UI/UX designs. This lightweight software application doesn’t require a monthly subscription, but you are required to renew your license annually. 4 5 3. Adobe Experience Design (XD) If you are a designer that uses PC instead of Mac, and you are looking for a similar experience to that of Sketch, Adobe XD is worth looking into. The user- friendly layout makes the software easy to use for new developers. 4. Framer.JS If you want an interactive and flexible tool for mobile app design, Framer.JS just may be the tool for you. Framer.JS gives you the option of building UI using code or, alternatively, you can use the visual editor to design using a WYSIWYG format that generates code based on the visual design. 5. Balsamiq Balsamiq is a tool that was created to assist with wireframes. Developed by former Adobe senior software engineer, Peldi Guilizzoni, this tool is laser- focused on wireframe designing. The program concentrates on the ideation phase by offering a clean layout to keep the workflow centered around the layout and not colors and icons. You can choose from clean wireframe designs, or you can design wireframe sketches. 4 6 6. InVision Studio InVision is a design tool that is compatible with most web browsers. This application easily creates prototypes and mockup designs that are interactive and clickable. The collaboration features allow you to share your files with your team. 7. UXPin If you are looking for a tool that grants you the power to design dynamic UI layouts without coding, UXPin might be for you. The drag-and-drop ease that UXPin provides easily creates quality wireframes and prototypes. There are 1,000 built-in elements for mobile, desktop, and web products. 8. Origami Studio Origami Studio is a free design tool developed by the team at Facebook in 2016. The software is conceived to help quickly design and share interactive interfaces. The program’s patch editor can be used to create prototypes, and the extensive patch library has design elements like animations, switches, and Boolean operators. If you have designs in Photoshop or Sketch, they can be copied into Origami. 4 7 9. Marvel For those looking to design and collaborate with a development team, Marvel is a good solution. There is also a synchronization feature that allows you to synchronize designs from Photoshop, Illustrator, Sketch, and select cloud storage accounts. This feature allows you to design your app with other tools and use Marvel to bring those elements together. 10. Proto.io Proto.io is designed to make the process of UI design much easier by incorporating prototype and design templates. There is no need for coding with Proto.io, and you can also import designs from Photoshop and Sketch. Your Google Drive and Dropbox files can be imported into the program as well. Proto.io has an extensive Material Design UI Library, and its offline mode allows you to work even if you are not online. You can begin using this browser-based design tool with a free 15-day trial. 4 8 11. Adobe Illustrator Illustrator by Adobe is a widely used design tool by mobile app develo pers. This vector-based software is ideal for creating quality UI designs. The vector file type preserves resolution when image dimensions are increased. Illustrator has long been held in high regard among the design community. While there is a learning curve involved with using the program, the results justify the time spent learning how to navigate within the software. 12. Figma This browser-based design tool is compatible with most web browsers. With Figma, there is no need to install bulky software to your system or worry about compatibility issues. Figma features 60fps interactive editing and an intuitive pen tool. The use of team libraries makes sharing and collaboration simple. Figma gives design teams the ability to develop UI prototypes swiftly and simply. 4 9  Conclusion When customizing your mobile app’s UI, your primary objective is to maximize the experience of the end user; all design efforts are intended to serve that purpose. By using the tools outlined here, you are now able to create custom designs for your mobile app that are unique and eye-catching. Remember that simplicity is the order of the day; in this era, less is more when it comes to a clean and intuitive design. 5 0  Chapter 4 Mobile User Interface Design https://www.udemy.com/course/user-experience-design-for-mobile-ap ps-websites-ui-ux/ 5 1 THANK YOU