it-swarm.it

Logica dell'interfaccia CMS. - È questo l'approccio migliore?

Sto sviluppando un sistema cms. Attualmente sto lavorando sull'interfaccia per l'aggiunta di nuove voci di menu a un menu. (A causa della logica cms i menu sono fissi, l'utente non può aggiungere o rimuovere menu, eliminare solo tutte le voci di menu e assegnare voci di menu a menu o voci di menu).

Per aggiungere una nuova voce di menu, l'utente deve fare clic sulla grande area sopra i menu (vedi figura 2). Questo farà apparire i campi di input. Il salvataggio degli input comporterà la visualizzazione di una nuova voce di menu nella casella "Non assegnati". Per posizionare la voce di menu è sufficiente trascinarla in uno dei menu nella posizione desiderata.

Se desideri eliminare una voce di menu, trascinala nel cestino. Se desideri modificare un elemento, fai semplicemente clic su di esso, l'elemento verrà evidenziato e i campi di input (come quelli per l'aggiunta di un nuovo elemento) appariranno pieni delle informazioni dalla voce di menu selezionata. Basta cambiarlo e fare clic su Salva. Per modificare la posizione di un elemento, trascinalo nella posizione desiderata.

Spero che tutto sia facile da capire.

Le mie domande sono:

Questa idea è facile da usare e logica? È il modo migliore per farlo o hai un'idea migliore? Hai commenti/idee per migliorare?

cms ui img 1 img 1

cms ui img 2 img 2

// Aggiornare.

Okay, ho fatto un modello. Ho incorporato tutti i commenti di ArchieVersace come ho capito. Per quanto riguarda la casella di modifica modale: è solo uno schizzo veloce, quindi nessun input reale, dimensione, ....

Navigation TreeAdd/Edit BoxTrash Bin

// Aggiornamento del 29/10/2010

Quindi i miei cambiamenti attuali:

  • nessun cestino
  • struttura ad albero verticale
  • pulsante Aggiungi (accanto al nome del menu, ma potrebbe essere riposizionato)
  • voce di menu non assegnata sopra i menu se creata senza scegliere la posizione prima di mettere 3 menu (quantità media dei miei progetti) uno accanto all'altro, ciascuno ha una larghezza di circa 300 px. Dovrebbe bastare, perché non ho quasi mai un menu con più larghezza. Aggiungerò pulsanti per comprimere il menu, ma avrei tutti gli elementi non compressi all'avvio (ma forse salverò l'ultima preferenza tramite cookie).

Richiedo comunque javascript per i miei cms, non sarà distribuito come wordpress, ma venduto per progetto, quindi posso richiedere js. Ciò significa che non è necessario un fallback (salvataggio/annullamento) per il posizionamento del menu.

Il mio utente potrebbe utilizzare il sistema quasi quotidianamente, ma alcuni potrebbero anche aggiornare il contenuto della propria pagina Web solo ogni due mesi. Pertanto penso che dovrebbe essere il più semplice possibile. Per questo motivo ritengo sia fondamentale includere un altro pulsante Aggiungi sempre visibile. L'aggiunta di una voce di menu con questo pulsante provoca una voce di menu non assegnata a nessun menu. In questo caso la parte sopra i menu potrebbe apparire tenendo l'elemento appena creato.

Pensi che sia una buona idea? Non sarà visibile/occuperà spazio in eccesso se non è stata appena creata alcuna voce di menu.

alt text

8
Lukas Oppermann

Penso che il layout orizzontale del menu possa essere fonte di confusione. Innanzitutto, non ha senso gerarchico: perché solo il primo livello è disposto in orizzontale e gli altri livelli sono verticali? Un altro problema è cosa succede quando ci sono più oggetti di primo livello? Lo scorrimento orizzontale non è un'ottima soluzione nella maggior parte dei casi. Renderei tutto verticale e quindi rientrare i sotto-elementi come hai già fatto.

Le sezioni cestino e meta menu non sono necessarie, secondo me. Se hai solo 3 input da compilare per ogni voce di menu, il recupero dal cestino non è un grosso problema. Inoltre, la funzionalità della sezione del meta menu potrebbe essere sostituita da un menu esistente durante la creazione di un nuovo menu. (Se viene popolato automaticamente da tutte le pagine del sito, di nuovo, devi pensare alla scala). Entrambe le sezioni potrebbero essere sostituite con una sezione di voci di menu di modifica.

A parte questo, sembra fantastico. Adoro la semplicità del tuo modello.

0
Virtuosi Media

Se guardo solo queste schermate senza la tua lunga spiegazione, è difficile capire cosa fare, cosa fare clic e quale sia l'ordine di interazione. Questo di per sé è piuttosto eloquente: una grande interfaccia utente in genere richiede una spiegazione minima (pensa a qualcosa come l'iPhone o il Wii, dove è molto rapidamente molto ovvio cosa devi fare senza aver bisogno di un paragrafo di testo per iniziare) .

Quindi la prima cosa che vorrei fare è mostrare queste schermate a poche altre persone (IRL) e vedere come rispondono senza la tua spiegazione. Lo capiscono? Sanno cosa stanno guardando e cosa ci si aspetta da loro qui? In caso contrario, se è necessario spiegare le cose, è consigliabile riorganizzare le schermate. Puoi farlo raccogliendo feedback dalle persone o creando un prototipo dell'app e facendo in modo che le persone lo utilizzino (fai attenzione a suggerire loro cosa dovrebbero fare - lasciali inciampare da soli).

Il feedback che riceverai in quella fase sarà molto più utile di qualsiasi opinione la gente qui può darti.

Inoltre, considera che poiché le tue immagini sono attualmente wireframe in bianco e nero, sarà più difficile capire il peso visivo per le persone che guardano il design che se aumentassi un po 'la fedeltà, aggiungessi colore e usassi la tipografia in vari gradi per aiutare con come i miei occhi dovrebbero muoversi sullo schermo.

2
Rahul

Posso offrirti aiuto con alcune interazioni (come ho sotto), ma sarà di utilità limitata poiché non so cosa stai cercando di ottenere. Quello che devi veramente fare è dichiarare i requisiti del sistema. Cosa stanno cercando di ottenere i tuoi utenti? Con quale frequenza useranno il sistema? Quali sono i loro livelli di abilità? eccetera.

Ad esempio, un utente non frequente del sistema potrebbe dimenticare come utilizzarlo tra gli usi, quindi in questo caso sarà necessario rendere l'interfaccia molto semplice da usare e raccogliere. Tuttavia, se i tuoi utenti visitano frequentemente un approccio troppo semplificato può renderlo frustrante in quanto gli utenti non rimangono principianti a lungo; molto rapidamente diventeranno utenti intermedi che richiedono maggiore potenza. Non sto dicendo che rendi qualcosa di difficile da usare, ma per gli utenti intermedi non dovresti aver paura di aggiungere potenza e complessità in più.

In termini di modello fornito, ecco alcuni suggerimenti specifici:

  • Rimuovere i pannelli non assegnati, aggiungere e eliminare in quanto non offrono all'utente funzionalità abbastanza utili per la quantità di spazio che occupano.
  • Metti il ​​pulsante Aggiungi nel contesto di dove viene aggiunto anche, in modo che l'utente possa aggiungere dove lo desidera piuttosto che aggiungerlo e posizionarlo.
  • Quando un utente desidera configurare una voce di menu, mostra una casella grigia con i campi per raccogliere le informazioni
  • Aggiungi un pulsante modifica ed elimina a ciascuna voce di menu
  • Aggiungi contratto ed espandi i pulsanti a ciascun livello all'interno del menu, per impostazione predefinita tutti i livelli sono contratti.
  • Consentire una buona quantità di spazio per voci di menu più lunghe
  • Si consiglia di aggiungere opzioni di rollback come i pulsanti Salva e Annulla

Di seguito è riportato il mock up: alt text

1
ArchieVersace

Un altro aggiornamento. alt tree

Non sono sicuro di perdere il pulsante Aggiungi. Le persone potrebbero capire come aggiungere facilmente voci di menu?

Inoltre, come faresti per rendere possibile l'aggiunta di voci di menu allo stesso livello o livello secondario? Quello in questo momento probabilmente mi sarebbe di livello inferiore (in realtà per questo il pulsante dovrebbe essere spostato leggermente a destra). Ma come aggiungeresti un nuovo oggetto dello stesso livello nel punto desiderato?

Nel menu a piè di pagina ho provato a mostrare come apparirebbe trascinando una voce di menu in una posizione diversa.

0
Lukas Oppermann