3-2 Colors, Sounds, and Motion
.docx
keyboard_arrow_up
School
Southern New Hampshire University *
*We aren’t endorsed by this school
Course
319
Subject
Computer Science
Date
Feb 20, 2024
Type
docx
Pages
5
Uploaded by Magistrate_Valor_Ferret6 on coursehero.com
Thomas Nguyen
1/25/2024
CS319 UI/UX Design and Development
3-2 Assignment: Colors, Sounds, and Motion
Impact of Color
Color has a great impact on UI/UX design for the overall user experience on an application. All applications use a color theme which reflects their style and brand. I like to place
sports bets on NFL games and use the sports betting app FanDuel or DraftKings. FanDuel’s color
theme is blue and black while DraftKings uses a green and black color theme. Color is crucial as it creates a visually appealing design. Color also has the ability to evoke emotions, influencing user behavior, and shapes the overall user experience within an app (Tiwari, 2023).
UI/UX color principles are defined as hierarchical, legible, and expressive. Hierarchical indicates which elements are interactive, relation to other elements, and level of importance (
Material Design
, n.d.). Amazon uses a red color for their limited time deals, which encourages users to make quick purchases as red invokes a sense of urgency and for users to act. Legible is the legibility standards of text and icons appearing on colored backgrounds. There should be proper color contrast of text and icons for readability and for the interface to be more accessible to a wider audience for the visually impaired. Apps usually allow users today to switch from a light or dark theme to the interface which allows users to have a more comfortable viewing experience. Expressive is the app’s brand color and reinforces a brand’s style. Crypto.com app uses a minimalistic design with a dark theme that highlights the graphical elements of tokens and
daily graph trends of the tokens. The interactive elements for buying, selling, and depositing are integrated within the design that allows an intuitive navigation experience for users.
Design with Color
In approaching design with color for my own app, I would select a palette of color that would emotionally engage with my target audience. Creating an application for family members to connect with relatives who have dementia, I would use a soft blue or green color theme as they are calming colors and promote loyalty, peace, and health. I would use high contrast colors for notifications as it would enhance clarity and readability. Hierarchical colors will be established to ensure users understand information. The colors will represent different categories to aid users in navigating the app effectively and efficiently. The app will need to engage users emotionally, using warm tones such as yellow or orange will create a positive atmosphere and can be used with interactive elements in the app. The app will also have light and dark themes for
all audiences as an alternative color scheme can reduce eye strain and create comfortable viewing experiences for users. Applying color psychology to an application can impact user experience as colors evoke emotions to influence user behavior while interacting with an app.
Impact of Sound
The use of sound in UI/UX design adds the auditory element of an app. Sounds improve user experience by communicating information. Various devices use sounds for notifications, calls, interactions, and system alerts. Devices that use sounds are phones, tablets, laptops, gaming systems, wearable watch devices, and speakers. Sounds give the affirmation something has been done and connects the user to the app they are using. Common sounds are beep sounds or sounds of swipes when swiping an app away on the phone. Designers should implement sounds that are subtle and not overwhelming. If a user is on a banking app and the user clicks the
checking account button to see their checking balance, the sound should be a click sound to confirm the confirmation of clicking the button. If a designer were to make the sound an alarm,
that would overwhelm the user and would turn off user engagement from the application. Sounds
should not all be the same and match according to their button elements. I use the Fitness app on my Apple smartwatch and have set goals for when I work out. My goal will be to work out for forty minutes and when the task is completed receive a type of congratulatory chime to show I completed the task. Notifications, errors, progressions, and simple buttons should have their own
distinct sound that engages users. Design with Sound
In designing my own UI/UX design I have learned to sounds should match with the context of the app. Creating an app for tracking relatives with dementia should have calm and distinct tones to engage users emotionally. Overwhelming sounds in this type of app would be inappropriate as most users of this app will already be in some type of panic if they are trying to locate a loved one. Having assuring tones and sounds will give users a sense of comfort while using the app. User preference is also another option where users can pick their own sounds that would provide personalization and accommodating individual preferences. Sound design should enhance user experience without causing distraction or irritation. Limitations of Color and Sound
In UI/UX design color and sound are powerful tools but do not come without limitations. Colors used in apps can be a subjective experience and vary from user to user. One user may associate color differently from another user. Color may be calm to one user, while another user can find the color unappealing. Designers need to take culture in account as different colors may associate colors with different emotions and connections
(Hassini, 2023). Allowing color
Your preview ends here
Eager to read complete document? Join bartleby learn and gain access to the full version
- Access to all documents
- Unlimited textbook solutions
- 24/7 expert homework help
Related Questions
Part 2: GUI Design
In addition to creating pseudocode and a flowchart for your app, you’ll also create a basic GUI design for your app. You can use Microsoft PowerPoint or Apache OpenOffice Impress to lay out your GUI and indicate components such as buttons, text boxes, sliders, and others. Be sure to label your GUI design with component names and indicate their properties. When you’re finished, save your GUI design as a Portable Document Format (PDF) file (*.pdf).
Keep the following guidelines in mind when designing your app and GUI:
Ensure you understand the problem the app needs to solve.
Create storyboards (sketches of how you want to design your program).
Define the classes, objects, and connections.
Plan the logic.
Make the interface natural, predictable, attractive, and user-friendly.
Present less information at once.
Use larger fonts to make reading easier.
Arrange components in a way that works for the smaller screen size.
Use components that work well with touchscreens.
arrow_forward
What measures are taken in GUIs to support users with color blindness or other visual impairments?
arrow_forward
Please look at image attached.
This is done in Visual Basic, using Microsoft Visual Studio Community Version.
arrow_forward
CSCI443 - GAME DEVELOPMENT
You have to create A 2D scene with objects reacting to
user input (mouse or keyboard) On unity
arrow_forward
Java Script
Create the following GUI. You do not have to provide any functionality.
Suggested logic1. Create the main window JWindow (set it for BorderLayout)2. Create a JPanel (set it for GridLayout 4x4 to handle button components)3. Add the JPanel to the "South" area of the JWindow4. Create the buttons , add to the JPanel5. Create a JText or Jlabel, add to the "North" section of the JWindow
arrow_forward
Create a JavaFx project that demonstrates various topics you have learnt like, creating structure of
JavaFx, Panes, UI Controls, Shapes and events-driven programming for different controls.
Create a window that consists of the following:
1) Window title: "Title of your project".
2) Design your window by using different User Interface Control like Text Field, Labels, Checkbox
/ Radio button, Combo box, List box, etc.... Use the data fields from the part-2, to design the
nodes of the window. (Minimum five different user interface controls should be used.
3) Use the concept of the Events Driven Programming (EDP) in order to activate the following
GUI components (Buttons, radio buttons, check box, etc..) to activate the events to some
nodes in your window to implement actions. (Minimum 2 different events should be created)
Include the below in your project report:
1) Screenshots of all output generated from the application.
2) Code for all classes.
Good Luck O
arrow_forward
Please look at image attached.
This is done using Visual Basic, using Microsoft Visual Studio Community Version.
arrow_forward
Android Studio Java
Create a detailed plan to implement the app and submit this file
The plan should include at least
App Feature Description (graph if needed)
Tech Difficulty
Solution to Each Difficulty in Detail (tutorial/image if needed)
Version of Approach
2. Layout of a simplified version
Create an android app and do layout only
Climacons.ttf for weather condition icons
Fixed weather values, no function
As close as possible
Ignore the page indicators (4 dots) at the bottom
Layout should look properly on different screens
Submit .xml file and screenshot
arrow_forward
Describe the typical components and layout structures used in GUI design.
arrow_forward
Think about three specific GUI applications you use regularly. For each one, first give the application's name. Then, IN DETAIL, describe how well each program conforms to the five general design principles. Use the specific words in the five general design principles as you evaluate each of your three GUI applications.
arrow_forward
4. Temperature Project
1) Create an Android Project named Temperature Project, that converts the temperature from
Fahrenheit to Celsius and display the result as shown in Figure using the following formula:
T(°C) = (T(°F)
(TF) -32) × 5/9
b) Add more widgets to layout resource defining UI activity. Add one Edit Text widget, two
TextView, and one Button to allow mobile user to enter temperature in Fahrenheit and
get the temperature in Celsius upon clicking on Button widget la elled "Convert
Temperature" as shown hereafter in Figure. Implement the corresponding process in the
overriding method onCreate().
TemperatureProject
TextView Widget
Edit Text Widget
TextView Widget
Button Widget
Layout
Mobile Device Screen
Temperature Project
Temperature Conversion
76
Temperature in Degros24.44
CONVERT TEMPERATURE
arrow_forward
"ll zain IQ
3G
نقطة واحدة
The area of the interface
window that defines where
the image will appear is
referred to as the rectangle
* .portion
Screen Coordinate System
Translation Viewing O
Window World O
View Port
نقطة واحدة
The process of extracting a
portion of a picture from
within or outside of a defined
region is referred to as
Translation O
Clipping
Scaling O
Reflection
arrow_forward
How does a GUI's design accommodate users with color blindness or visual impairments?
arrow_forward
It is essential to understand the process of mapping before attempting to design a user interface.Is there a way to make the UI more user-friendly?
arrow_forward
What are the benefits of using a Java Layout Manager within an application? Note that there are different ways to set a panel's layout manager. Provide an example of one of the ways to set this.
arrow_forward
Use android stdio to solve this question ( java language )
The layout layout in the application will be as above. Clicking on the orange triangular imagebuttons will navigate through the city images whose images are kept in the drawable folder in the application. The triangle shaped button on the right will be invisible when the last image in the Drawable folder is displayed. When the first image in the Drawable folder is displayed, the left triangle button will be invisible. The name, license plate and description of the city displayed in the official imageView will be kept in the string.xml folder and when the triangle buttons are clicked, the information about this city will be changed along with the images.
Use android stdio to solve this question ( java language )
arrow_forward
How are designers accommodating the trend of screen notches and punch-hole cameras in modern smartphone GUIs?
arrow_forward
What techniques are employed to design GUIs that can dynamically adjust based on user mood or context?
arrow_forward
What techniques are being employed to design GUIs that can be navigated using gestures or full-body movements?
arrow_forward
In what ways can animation be used to enhance the user experience in a GUI without being distracting?
arrow_forward
Andriod studio pro_lab 6
1. Create a layout that displays the latitude, longitude, and accuracy for the network sensor and for the GPS sensor. Add a listener for each and have it display its reported location in the appropriate onscreen widget. Run it on a device. Walk around with the app open to this screen and observe the differences.
2. Modify the layout in Exercise 1 to have a third set of latitude, longitude, and accuracy labeled best location. Code a method to test for the best location and put the values in these widgets. Run the app and again observe the results.
3. Modify the markers on the map to use a custom icon. You can download and use an open source graphics program such as Gimp to create your icon. You may have to work with the icon size to get it to display in a reasonable manner on the screen
arrow_forward
Course Title: Mobile Application Development
Please Code in "Android Studio" and Output Screen Shot
Question :
Develop a Simple Android Application that uses Layout Managers and Event Listeners. Write down the code and also display output. Take down the screenshot and paste down along with source code. Follow the instructions below to complete the task:
Use linear layout and grid layout
Use action event and event listeners
Manage result string and a calculation history string
Apply click event on result string to fill up first input with result value
arrow_forward
SEE MORE QUESTIONS
Recommended textbooks for you
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Cengage Learning
Programming with Microsoft Visual Basic 2017
Computer Science
ISBN:9781337102124
Author:Diane Zak
Publisher:Cengage Learning
EBK JAVA PROGRAMMING
Computer Science
ISBN:9781337671385
Author:FARRELL
Publisher:CENGAGE LEARNING - CONSIGNMENT
Programming Logic & Design Comprehensive
Computer Science
ISBN:9781337669405
Author:FARRELL
Publisher:Cengage
COMPREHENSIVE MICROSOFT OFFICE 365 EXCE
Computer Science
ISBN:9780357392676
Author:FREUND, Steven
Publisher:CENGAGE L
Related Questions
- Part 2: GUI Design In addition to creating pseudocode and a flowchart for your app, you’ll also create a basic GUI design for your app. You can use Microsoft PowerPoint or Apache OpenOffice Impress to lay out your GUI and indicate components such as buttons, text boxes, sliders, and others. Be sure to label your GUI design with component names and indicate their properties. When you’re finished, save your GUI design as a Portable Document Format (PDF) file (*.pdf). Keep the following guidelines in mind when designing your app and GUI: Ensure you understand the problem the app needs to solve. Create storyboards (sketches of how you want to design your program). Define the classes, objects, and connections. Plan the logic. Make the interface natural, predictable, attractive, and user-friendly. Present less information at once. Use larger fonts to make reading easier. Arrange components in a way that works for the smaller screen size. Use components that work well with touchscreens.arrow_forwardWhat measures are taken in GUIs to support users with color blindness or other visual impairments?arrow_forwardPlease look at image attached. This is done in Visual Basic, using Microsoft Visual Studio Community Version.arrow_forward
- CSCI443 - GAME DEVELOPMENT You have to create A 2D scene with objects reacting to user input (mouse or keyboard) On unityarrow_forwardJava Script Create the following GUI. You do not have to provide any functionality. Suggested logic1. Create the main window JWindow (set it for BorderLayout)2. Create a JPanel (set it for GridLayout 4x4 to handle button components)3. Add the JPanel to the "South" area of the JWindow4. Create the buttons , add to the JPanel5. Create a JText or Jlabel, add to the "North" section of the JWindowarrow_forwardCreate a JavaFx project that demonstrates various topics you have learnt like, creating structure of JavaFx, Panes, UI Controls, Shapes and events-driven programming for different controls. Create a window that consists of the following: 1) Window title: "Title of your project". 2) Design your window by using different User Interface Control like Text Field, Labels, Checkbox / Radio button, Combo box, List box, etc.... Use the data fields from the part-2, to design the nodes of the window. (Minimum five different user interface controls should be used. 3) Use the concept of the Events Driven Programming (EDP) in order to activate the following GUI components (Buttons, radio buttons, check box, etc..) to activate the events to some nodes in your window to implement actions. (Minimum 2 different events should be created) Include the below in your project report: 1) Screenshots of all output generated from the application. 2) Code for all classes. Good Luck Oarrow_forward
- Please look at image attached. This is done using Visual Basic, using Microsoft Visual Studio Community Version.arrow_forwardAndroid Studio Java Create a detailed plan to implement the app and submit this file The plan should include at least App Feature Description (graph if needed) Tech Difficulty Solution to Each Difficulty in Detail (tutorial/image if needed) Version of Approach 2. Layout of a simplified version Create an android app and do layout only Climacons.ttf for weather condition icons Fixed weather values, no function As close as possible Ignore the page indicators (4 dots) at the bottom Layout should look properly on different screens Submit .xml file and screenshotarrow_forwardDescribe the typical components and layout structures used in GUI design.arrow_forward
- Think about three specific GUI applications you use regularly. For each one, first give the application's name. Then, IN DETAIL, describe how well each program conforms to the five general design principles. Use the specific words in the five general design principles as you evaluate each of your three GUI applications.arrow_forward4. Temperature Project 1) Create an Android Project named Temperature Project, that converts the temperature from Fahrenheit to Celsius and display the result as shown in Figure using the following formula: T(°C) = (T(°F) (TF) -32) × 5/9 b) Add more widgets to layout resource defining UI activity. Add one Edit Text widget, two TextView, and one Button to allow mobile user to enter temperature in Fahrenheit and get the temperature in Celsius upon clicking on Button widget la elled "Convert Temperature" as shown hereafter in Figure. Implement the corresponding process in the overriding method onCreate(). TemperatureProject TextView Widget Edit Text Widget TextView Widget Button Widget Layout Mobile Device Screen Temperature Project Temperature Conversion 76 Temperature in Degros24.44 CONVERT TEMPERATUREarrow_forward"ll zain IQ 3G نقطة واحدة The area of the interface window that defines where the image will appear is referred to as the rectangle * .portion Screen Coordinate System Translation Viewing O Window World O View Port نقطة واحدة The process of extracting a portion of a picture from within or outside of a defined region is referred to as Translation O Clipping Scaling O Reflectionarrow_forward
arrow_back_ios
SEE MORE QUESTIONS
arrow_forward_ios
Recommended textbooks for you
- New Perspectives on HTML5, CSS3, and JavaScriptComputer ScienceISBN:9781305503922Author:Patrick M. CareyPublisher:Cengage LearningProgramming with Microsoft Visual Basic 2017Computer ScienceISBN:9781337102124Author:Diane ZakPublisher:Cengage LearningEBK JAVA PROGRAMMINGComputer ScienceISBN:9781337671385Author:FARRELLPublisher:CENGAGE LEARNING - CONSIGNMENT
- Programming Logic & Design ComprehensiveComputer ScienceISBN:9781337669405Author:FARRELLPublisher:CengageCOMPREHENSIVE MICROSOFT OFFICE 365 EXCEComputer ScienceISBN:9780357392676Author:FREUND, StevenPublisher:CENGAGE L
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Cengage Learning
Programming with Microsoft Visual Basic 2017
Computer Science
ISBN:9781337102124
Author:Diane Zak
Publisher:Cengage Learning
EBK JAVA PROGRAMMING
Computer Science
ISBN:9781337671385
Author:FARRELL
Publisher:CENGAGE LEARNING - CONSIGNMENT
Programming Logic & Design Comprehensive
Computer Science
ISBN:9781337669405
Author:FARRELL
Publisher:Cengage
COMPREHENSIVE MICROSOFT OFFICE 365 EXCE
Computer Science
ISBN:9780357392676
Author:FREUND, Steven
Publisher:CENGAGE L