2024-S2-IT2010-Lecture-03-UiUx.pdf

Mobile Application Development Mobile Application Development Mobile Platforms and Application Development fundamentals 2/23/2024 MAD | Thusithanjana Thilakarathna...

Mobile Application Development Mobile Application Development Mobile Platforms and Application Development fundamentals 2/23/2024 MAD | Thusithanjana Thilakarathna 1 Faculty of Computing Mobile Application Development Lecture Plan Introduction to App Development Mobile Platforms and Application Development fundamentals Mobile Interface Design Concepts and UI/UX Design Introduction to Android Operating System​ Main Components of Android Application​ Sensors and Media Handling in Android Applications Data Handling in Android Applications Android Application Testing and security aspects 2/23/2024 MAD | Thusithanjana Thilakarathna 2 Faculty of Computing Mobile Application Development Simplicity of the UI Different Perspectives for the design User Manager Engineer User’s perspective is the main thing Make things feel simple to use Making things simple does not mean it is created using simple technologies 2/23/2024 MAD | Thusithanjana Thilakarathna 3 Faculty of Computing Mobile Application Development 2/23/2024 MAD | Thusithanjana Thilakarathna 4 Faculty of Computing Mobile Application Development Complexity makes it Unsustainable Having too many features User will not use everything Users may feel, they are paying for unnecessary features There will be massive legacy code that makes the product more expensive to maintain All that unnecessary power comes at a price 2/23/2024 MAD | Thusithanjana Thilakarathna 5 Faculty of Computing Mobile Application Development Simplicity should not be faked Appear to be simple No real usage If you must show a magic character to explain how things work, it is not simplicity Simplicity isn't something you can stick on top of a user interface 2/23/2024 MAD | Thusithanjana Thilakarathna 6 Faculty of Computing Mobile Application Development Offices People are getting interrupted Telephone, messages emails Last minute work Homes Understand Do multiple things at ones (Laptop While Watching TV) Home Broadband may not be reliable the user’s Mothers, Fathers, Children environment Outdoors Busy streets Carrying bags In Ques Bright sun light Large devices may not be carried 2/23/2024 MAD | Thusithanjana Thilakarathna 7 Faculty of Computing Mobile Application Development 2/23/2024 MAD | Thusithanjana Thilakarathna 8 Faculty of Computing Mobile Application Development Experts Will explore the product Want never seen technology They will spend time with your product Willing Adopters Types of Already using similar products Not comfortable with new products They need easy ways to adopt to new features Very fewer of these type of users users Mainstreamers Majority is this category They don’t use the technology for its own sake; use it to get the job done Only use few key features “I just want my phone to work” attitude 2/23/2024 MAD | Thusithanjana Thilakarathna 9 Faculty of Computing Mobile Application Development Experts can be ignored Highly technical won’t face issues in your app like mainstreamers They care about highly technical details Always expect wonders Their demands may be complicated for the other users Apple’s expert customers wanted a flying car. Apple’s mainstream customers just wanted an MP3 player that worked 2/23/2024 MAD | Thusithanjana Thilakarathna 10 Faculty of Computing Mobile Application Development 2/23/2024 MAD | Thusithanjana Thilakarathna 11 Faculty of Computing Mobile Application Development Design for the Mainstream Usable design tends to focus on this group You can learn a lot by watching these people They are the majority They just want your app to work They hate the complexity 2/23/2024 MAD | Thusithanjana Thilakarathna 12 Faculty of Computing Mobile Application Development We will build a motor car for the great multitude. It will be…small enough for the individual to run and care for. It will be constructed…after the simplest designs modern engineering can devise. But it will be so low in price that no man making a good salary will be unable to own one. — Henry Ford, on the Model T Mass appeal comes from focusing on the mainstream 2/23/2024 MAD | Thusithanjana Thilakarathna 13 Faculty of Computing Mobile Application Development Mainstreamers are interested in getting the job done now; experts are interested in customizing their settings first What Mainstreamers value ease of control; experts value precision of control Mainstreamers want reliable results; experts want perfect results. mainstreamers Mainstreamers are afraid of breaking something; experts want to take things apart to see want how they work. Mainstreamers want a good match; experts want an exact match Mainstreamers want examples and stories; experts want principles Mainstreamers don’t want to build from scratch. 2/23/2024 MAD | Thusithanjana Thilakarathna 14 Faculty of Computing Mobile Application Development Emotional Need When we thought about why people would use our software, we realized that they had a lot on their plate. They wanted to achieve a lot and still feel in control. They needed to be able to capture a thousand items and yet not feel overwhelmed when they looked at the list. So, we put a lot of effort into making sure that they’d only ever look at a handful of the most important things, but they’d be able to find all their other notes and reminders just when they needed them. Jürgen Schweizer Developer Award winning iPhone to-do list app A getting things done app needs to be more than just a notepad. It needs to help users feel organized and relaxed. The Things app does this because it has a simple, flexible way of categorizing users’ to-do items. 2/23/2024 MAD | Thusithanjana Thilakarathna 15 Faculty of Computing Mobile Application Development 2/23/2024 MAD | Thusithanjana Thilakarathna 16 Faculty of Computing Mobile Application Development UI and UX in Mobile Applications 2/23/2024 MAD | Thusithanjana Thilakarathna 17 Faculty of Computing Mobile Application Development User Interface What user can see and interact with Its not the appearance, but how it works It is the first thing that user see, it directly effects the user’s view Visual elements greatly impacts an emotional connection with the user 2/23/2024 MAD | Thusithanjana Thilakarathna 18 Faculty of Computing Mobile Application Development Usage of colors in your app The key to picking the right colors for your app is to first understand the basics. You can then go on to apply to any UI that you're designing for. It's very easy to overdo or pick the wrong colors, which is why you may find yourself spending more time than you anticipated simply figuring out what the color of buttons in your product should be, for example. Understanding the basics is the first step to knowing what to do and also knowing what not to do, which is equally important when picking colors. 2/23/2024 MAD | Thusithanjana Thilakarathna 19 Faculty of Computing Mobile Application Development Consider the following when selecting colors UI Hierarchy Content Legibility Brand Color Primary Color Secondary Color Surface and Background 2/23/2024 MAD | Thusithanjana Thilakarathna 20 Faculty of Computing Mobile Application Development 60-30-10 Primary Color 60% Background Secondary Color 30% Accent Color 10% Buttons Pop Ups Highlights 2/23/2024 MAD | Thusithanjana Thilakarathna 21 Faculty of Computing Mobile Application Development User Experience Enhancing user satisfaction of an app, while involving the user’s opinions and feelings before, during, and after their interaction with an app. UX of a mobile application influences how users observe it Its about the value addition Ease of use Help to fulfil user’s needs Includes all aspects of the end-user’s interaction with the company, and its products/services. 2/23/2024 MAD | Thusithanjana Thilakarathna 22 Faculty of Computing Mobile Application Development Design Thinking Read the article on Design Thinking https://www.designorate.com/design-thinking-guide- what-why-how/ Read more about Double Diamond design thinking process https://www.designorate.com/the-double-diamond- design-thinking-process-and-how-to-use-it/ 2/23/2024 MAD | Thusithanjana Thilakarathna 23 Faculty of Computing Mobile Application Development 2/23/2024 MAD | Thusithanjana Thilakarathna 24 Faculty of Computing Mobile Application Development xml XML stands for extensible Markup Language. XML was designed to store and transport data. XML was designed to be both human- and machine-readable. XML does not do anything Someone must write a piece of software to send, receive, store, or display it Refer to https://www.w3schools.com/xml/default.asp Xmlns - The xmlns attribute specifies the xml namespace for a document. 2/23/2024 MAD | Thusithanjana Thilakarathna 25 Faculty of Computing Mobile Application Development Android Studio Android Studio provides the fastest tools for building apps on every type of Android device. Intelligent Code Editor Flexible Build System Realtime Profilers Insightful APK Analyzer Fast Emulator 2/23/2024 MAD | Thusithanjana Thilakarathna 26 Faculty of Computing Mobile Application Development Android UI elements Text Buttons Widgets Layouts Containers Helpers Addons Labels Buttons View Constraint Spinner Groups Google Inputs Image Web View Layout Recycler Barriers widgets Buttons Calendar Linear View Flow List views Radio Progress Layout Card View Buttons bar Frame Toolbar Toggle Rating bar Layout Buttons Dividers Table Switch Layout Search Floating View Action Buttons 2/23/2024 MAD | Thusithanjana Thilakarathna 27 Faculty of Computing Mobile Application Development 2/23/2024 MAD | Thusithanjana Thilakarathna 28 Faculty of Computing Mobile Application Development Android Templates 2/23/2024 MAD | Thusithanjana Thilakarathna 29 Faculty of Computing