Wiki source code of App Within Minutes - Improvements (7.x)
Last modified by Vincent Massol on 2024/02/26 17:51
Hide last authors
author | version | line-number | content |
---|---|---|---|
1.2 | 1 | {{velocity}} | |
2 | $xwiki.ssx.use("Improvements.WebHome") | ||
3 | $xwiki.ssx.use("Standards.WebHome") | ||
4 | $xwiki.ssx.use("Improvements.DocumentationFlavor") | ||
5 | {{/velocity}} | ||
6 | |||
17.9 | 7 | The purpose of this proposal is to help integrate the following applications created with App Within Minutes with Flamingo Skin. | |
1.2 | 8 | ||
17.7 | 9 | ||
10 | |||
11 | |||
17.11 | 12 | ||
13 | |||
14 | |||
15 | |||
38.4 | 16 | (% class="left column50 dashboardleft" %) | |
17.2 | 17 | ((( | |
18 | == Proposal == | ||
24.2 | 19 | ||
17.2 | 20 | {{toc start="3"/}} | |
21 | ))) | ||
1.2 | 22 | ||
38.4 | 23 | (% class="right column50 dashboardright" %) | |
17.2 | 24 | ((( | |
25 | == Overview == | ||
38.1 | 26 | Before - after proposal | |
24.2 | 27 | ||
17.2 | 28 | {{gallery}} | |
29.2 | 29 | image:before&afterStep1.png | |
30 | image:before&afterStep2.png | ||
31 | image:before&afterStep3.png | ||
32 | image:before&afterHomepage.png | ||
17.2 | 33 | {{/gallery}} | |
34 | ))) | ||
35 | |||
17.5 | 36 | (% class="clearfloats" %) | |
37 | ((( | ||
17.2 | 38 | ||
17.5 | 39 | ))) | |
17.2 | 40 | ||
17.6 | 41 | ||
17.3 | 42 | (% class="left column50 dashboardleft" %) | |
43 | ((( | ||
17.13 | 44 | === Wizard header === | |
24.2 | 45 | ||
17.3 | 46 | This pattern is widely implemented when users have to fill in data in multiple steps. The purpose of this pattern is to: | |
24.2 | 47 | ||
17.3 | 48 | * Guide users | |
49 | * Explain the scope of the process by clearly stating how many steps are needed to complete it | ||
50 | * Show the user’s current position in the process by visually highlighting the current step | ||
51 | ))) | ||
52 | |||
53 | (% class="right column50 dashboardright" %) | ||
54 | ((( | ||
55 | {{gallery}} | ||
56 | image:WizardHeader1.png | ||
57 | image:WizardHeader2.png | ||
58 | image:WizardHeader3.png | ||
59 | {{/gallery}} | ||
60 | ))) | ||
61 | |||
17.5 | 62 | (% class="clearfloats" %) | |
63 | ((( | ||
64 | |||
65 | ))) | ||
66 | |||
17.6 | 67 | ||
68 | |||
17.5 | 69 | (% class="left column50 dashboardleft" %) | |
70 | ((( | ||
17.13 | 71 | === Icons === | |
24.2 | 72 | ||
18.1 | 73 | Here I've added icons for all fields and small titles, but also changed the previous added icons with the ones from font awesome (see photo number 4 from gallery.) | |
17.5 | 74 | The benefits of icons in a graphical user interface (GUI) include: | |
24.2 | 75 | ||
17.5 | 76 | * Icons can be visually pleasing and enhance the aesthetic appeal of a design | |
77 | * They support the notion of a product family or suite when the same icons and style are used in several places | ||
78 | * Good icons can make the look of a webpage more pleasing | ||
79 | * Icons are fast to recognize at a glance (if well designed) — particularly true for standard icons that people have seen and used before | ||
80 | ))) | ||
81 | |||
82 | (% class="right column50 dashboardright" %) | ||
83 | ((( | ||
84 | {{gallery}} | ||
85 | image:applicationName.png | ||
86 | image:steps.png | ||
87 | image:fieldPalette.png | ||
88 | image:fields.png | ||
89 | image:description.png | ||
90 | image:columns.png | ||
91 | image:icon.png | ||
92 | image:tip.png | ||
93 | {{/gallery}} | ||
94 | ))) | ||
95 | |||
96 | (% class="clearfloats" %) | ||
97 | ((( | ||
98 | |||
99 | ))) | ||
100 | |||
17.12 | 101 | ||
102 | |||
17.5 | 103 | (% class="left column50 dashboardleft" %) | |
104 | ((( | ||
17.13 | 105 | === Homepage === | |
24.2 | 106 | ||
17.12 | 107 | I made some changes on the homepage also: | |
24.2 | 108 | ||
17.12 | 109 | * I replaced the 5 links from the anterior action box, with a button and a dropdown menu list. I find it more user friendly and more compatible with Flamingo Skin | |
110 | * I also deleted some empty space | ||
17.5 | 111 | ))) | |
112 | |||
113 | (% class="right column50 dashboardright" %) | ||
114 | ((( | ||
17.12 | 115 | {{gallery}} | |
116 | image:Homepage1.png | ||
117 | image:Homepage.png | ||
118 | {{/gallery}} | ||
17.5 | 119 | ))) | |
120 | |||
121 | (% class="clearfloats" %) | ||
122 | ((( | ||
123 | |||
124 | ))) | ||
125 | |||
19.4 | 126 | ||
127 | |||
19.2 | 128 | (% class="left column50 dashboardleft" %) | |
129 | ((( | ||
19.3 | 130 | == Remove tabbed information == | |
24.2 | 131 | ||
19.2 | 132 | Another thing that I think we should change is to remove the tabbed information from the bottom of the homepage (comments, attachments, history, information). | |
20.3 | 133 | You can see the difference in the gallery. | |
19.2 | 134 | ))) | |
17.5 | 135 | ||
19.2 | 136 | (% class="right column50 dashboardright" %) | |
137 | ((( | ||
20.2 | 138 | {{gallery}} | |
139 | image:noDocextra.png | ||
140 | image:docextra.png | ||
141 | {{/gallery}} | ||
19.2 | 142 | ))) | |
143 | |||
144 | (% class="clearfloats" %) | ||
145 | ((( | ||
146 | |||
147 | ))) |