diff --git a/Ledger/app/src/main/java/at/xaxa/ledger/ui/LedgerUI.kt b/Ledger/app/src/main/java/at/xaxa/ledger/ui/LedgerUI.kt index dad2296..eb76ecc 100644 --- a/Ledger/app/src/main/java/at/xaxa/ledger/ui/LedgerUI.kt +++ b/Ledger/app/src/main/java/at/xaxa/ledger/ui/LedgerUI.kt @@ -14,11 +14,14 @@ import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.requiredHeight +import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.wrapContentHeight import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.foundation.layout.wrapContentWidth +import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.Add import androidx.compose.material.icons.filled.DateRange import androidx.compose.material.icons.filled.List import androidx.compose.material3.Button @@ -29,6 +32,7 @@ import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Icon import androidx.compose.material3.IconButton import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.OutlinedButton import androidx.compose.material3.OutlinedTextField import androidx.compose.material3.Surface import androidx.compose.material3.Text @@ -77,11 +81,17 @@ fun HeaderCard(modifier: Modifier = Modifier, balance: String, onCategoryButton: .padding(16.dp) ) { Column() { - IconButton(onClick = { - onCategoryButton() - }) { + OutlinedButton( + modifier= Modifier.size(50.dp), + shape = CircleShape, + border= BorderStroke(1.dp, Color(0xffc6c6c6)), + contentPadding = PaddingValues(0.dp), + onClick = { + onCategoryButton() + } + ) { Icon( - imageVector = Icons.Filled.List, + imageVector = Icons.Filled.Add, contentDescription = "Add to list", // Provide a meaningful description for accessibility tint = MaterialTheme.colorScheme.onSurface // Optional: Adjust the tint as needed ) @@ -219,6 +229,7 @@ fun LayoutMediaText(modifier: Modifier = Modifier, name: String, date: String, a } Box( modifier = Modifier + .weight(1f) .fillMaxHeight() .wrapContentWidth() // Allow the Box to wrap its content width .padding(start = 16.dp), // Add some padding to separate from the Column diff --git a/Ledger/app/src/main/java/at/xaxa/ledger/ui/category/add/AddCategoryUI.kt b/Ledger/app/src/main/java/at/xaxa/ledger/ui/category/add/AddCategoryUI.kt index 76f2649..a7c9c8a 100644 --- a/Ledger/app/src/main/java/at/xaxa/ledger/ui/category/add/AddCategoryUI.kt +++ b/Ledger/app/src/main/java/at/xaxa/ledger/ui/category/add/AddCategoryUI.kt @@ -37,7 +37,7 @@ fun AddCategory( ) { var name by remember { mutableStateOf("") } - var selectedIconIndex by remember { mutableStateOf(0) } // Store index of selected icon + var selectedIconIndex by remember { mutableStateOf(-1) } // Store index of selected icon var expanded by remember { mutableStateOf(false) } // Controls dropdown visibility Column( diff --git a/Ledger/app/src/main/java/at/xaxa/ledger/ui/category/edit/EditCategoryViewModel.kt b/Ledger/app/src/main/java/at/xaxa/ledger/ui/category/edit/EditCategoryViewModel.kt index 35609f2..575eae8 100644 --- a/Ledger/app/src/main/java/at/xaxa/ledger/ui/category/edit/EditCategoryViewModel.kt +++ b/Ledger/app/src/main/java/at/xaxa/ledger/ui/category/edit/EditCategoryViewModel.kt @@ -18,18 +18,13 @@ data class CategoryUIState(val category: CategoryEntity = CategoryEntity(0,"",0) class EditCategoryViewModel(private val savedStateHandle: SavedStateHandle, private val entryRepository: EntryRepository) : ViewModel() { - - private val categoryId: Int = checkNotNull(savedStateHandle["categoryId"]) - var categoryUi by mutableStateOf(CategoryUIState()) private set var deletePossible by mutableStateOf(false) var redirect by mutableStateOf(false) - - init { viewModelScope.launch { val category = withContext(Dispatchers.IO) { diff --git a/MockupAdd.png b/MockupAdd.png deleted file mode 100644 index 889dabb..0000000 Binary files a/MockupAdd.png and /dev/null differ diff --git a/MockupEdit.png b/MockupEdit.png deleted file mode 100644 index 93fb753..0000000 Binary files a/MockupEdit.png and /dev/null differ diff --git a/MockupStart.png b/MockupStart.png deleted file mode 100644 index a46517d..0000000 Binary files a/MockupStart.png and /dev/null differ diff --git a/README.md b/README.md index 2e2fd33..3f893e8 100644 --- a/README.md +++ b/README.md @@ -29,10 +29,80 @@ Like: - Budget-Conscious Individuals - Small Business Owners - ### Mockups -![Mockup of Start Screen](MockupStart.png) -![Mockup of Add Screen](MockupAdd.png) -![Mockup of Edit Screen](MockupEdit.png) -![Userflow](UserFlow.png) \ No newline at end of file +![Mockup](mockup.png) +![Userflow](UserFlow.png) + +## Usability Testing Plan +### Experimental Questions & Variables +1. Question: Does the user have any major issue while navigating the app? + - IV: App navigation design (e.g., layout, menu structure, or usability features). + - DV: User-reported issues or difficulties while navigating. + - Methods: SEQ Question + +2. Question: Does the user find Categories useful? + - IV: Presence or design of the Categories feature. + - DV: User perception of usefulness (e.g., measured via survey or rating). + - Method: Likert scale How useful was it? +3. Question: Does the user find Categories? + - IV: Visibility or accessibility of the Categories feature. + - DV: User success in locating or using Categories. + - Method: Task Completion Testing + +4. Question: Does the icon selection affect user satisfaction? + - IV: Icon design or selection (e.g., different icon styles or clarity). + - DV: User satisfaction (e.g., measured via survey or rating). + - Method: Open Question + +5. Question: How long does it take for a user to add a Category? + - IV: Process or interface for adding a Category (e.g., number of steps, clarity of instructions). + - DV: Time taken to complete the task. + - Method: Time till completion + +6. Question: How long does it take for a user to add a Transaction? + - IV: Process or interface for adding a Transaction (e.g., simplicity, number of fields). + - DV: Time taken to complete the task. + - Method: Time till completion + +### Heuristic Evaluation + +1. Visibility of System Status + - Issue: Users may not be immediately aware of changes to their balance after adding or editing a transaction, as there is no clear feedback. + - Recommendations: Implement a visual or auditory feedback system (e.g., a confirmation message or animation or redirect to the Balance overview) to inform users when their balance updates. + +2. Match Between System and the Real World + - Issues: None + - Recommendations: None + +3. User Control and Freedom + - Issues: Users might want to create their own categories rather than use the predefined ones. + - Recommendations: Introduce a feature to add and delete your own categories. +4. Consistency and Standards + - Issues: The "Your Balance" and the name of the transaction do not share the same font + - Recommendations: Standardize all texts to use the same font, and color scheme for a cohesive user experience. + +5. Error Prevention + - Issues: Users might enter invalid data, such as symbols as the amount, without receiving a warning, leading to potential errors. + - Recommendations: Add validation checks and warnings to prevent users from entering incorrect data, ensuring errors are caught before submission. + +6. Recognition Rather Than Recall + - Issues: Users may need to remember details about past transactions, such as categories or dates, which could increase cognitive load. + - Recommendations: Display a detailed transaction history with categories and dates visible at all times, reducing the need for users to recall information. + +7. Flexibility and Efficiency of Use + - Issues: Users may find it time-consuming to navigate through multiple screens or steps to perform common tasks, such as adding or editing transactions. + - Recommendations: Ensure that all frequently used actions, like adding or deleting transactions, can be completed in as few steps as possible, with clear and accessible buttons for quick access. +8. Aesthetic and Minimalist Design + - Issues: The interface might include too many visual elements or colors, which could distract users from focusing on their primary tasks, such as managing transactions or checking their balance. + - Recommendations: Ensure that the design remains clean and focused by using a limited color palette and removing any unnecessary decorative elements, keeping the interface visually simple and task-oriented. + +9. Help Users Recognize, Diagnose, and Recover from Errors + - Issues: Error messages may not clearly explain what went wrong or how to fix it, leaving users confused. + - Recommendations: Provide detailed error messages in plain language, including actionable steps to resolve the issue. + +10. Help and Documentation + - Issues: Help and Documentation may be important and nice to have but out of scope for this version of the design. + - Recommendations: For now, focus on maintaining the clarity and simplicity of the current help documentation. If these advanced features are considered in future updates, ensure that corresponding help resources are developed to support them. + + diff --git a/mockup.png b/mockup.png new file mode 100644 index 0000000..fbb7c8e Binary files /dev/null and b/mockup.png differ